如何将按钮与输入组合?

时间:2016-11-15 22:52:47

标签: javascript html5 css3 input w3.css

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>

<form id="image-form" action="#" class="w3-container w3-border w3-margin-top">
    <input id="mediaCapture" type="file" accept="image/*,capture=camera" >
    <button id="submitImage" title="Add an image" class="w3-btn w3-dark-grey w3-left">
        <i class="material-icons">image</i>
    </button>
</form>

</body>
</html>

<input>创建一个&#34;浏览...&#34;带文字的按钮&#34;没有选择文件&#34;

我还有一个图像图标作为按钮。

如何将图标按钮替换为浏览按钮?

点击图标按钮后,会打开目录让我选择图片。

感谢您的帮助。

我正在使用w3.css框架。

2 个答案:

答案 0 :(得分:1)

通过将atlassian.xsrf.token=SOMETHING|RANDOM|lout 元素的显示属性设置为submit,您仍然可以通过单击input元素来触发文件选择过程。将您的图标放在hidden内并相应地设置样式。

确保label元素的label属性与文件for的{​​{1}}匹配

label

答案 1 :(得分:0)

input元素的显示属性设置为隐藏,然后设置button元素的点击事件以触发input元素的点击事件

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>

<form id="image-form" action="#" class="w3-container w3-border w3-margin-top">
    <input id="mediaCapture" type="file" accept="image/*,capture=camera" style="display: none;">
    <button id="submitImage" title="Add an image" class="w3-btn w3-dark-grey w3-left">
        <i class="material-icons">image</i>
    </button>
</form>
<script src="jquery.js"></script>
<script>
    $('#submitImage').on('click', function(){
        $('#mediaCapture').trigger('click');
    });
</script>
</body>
</html>