如何将按钮与输入组合？

<!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>创造了一个“浏览...”文本按钮“没有文件选择”如何将按钮与输入组合？

我也有一个形象的图标按钮的作用。

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

一旦我点击图标按钮，它会打开目录让我选择图像。

感谢您的任何帮助。

我正在使用w3.css框架。

来源

2016-11-15 Patrick

请为您的代码创建一个Plunker或JSFiddle示例。谢谢。 – tomepejo

此链接是bootstrap特有的，但您可以根据自己的需要进行调整：https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3 – nurdyguy

使输入文件的可见性为零并使用绝对定位将其放在按钮上。还要将其尺寸设置为与按钮相同。 –

通过将input元素的显示属性设置为hidden，您仍然可以通过单击label元素来触发文件选择过程。将您的图标放在label中，并相应地显示样式。

确保label元素的for属性相匹配的文件input

<style> 
    .hidden {display:none;} 
</style> 
<label for="mediaCapture"> 
    <i class="material-icons">image</i> 
</label> 
<input type="file" class="hidden" id="mediaCapture">

来源

2016-11-15 23:17:49 bob

设置input元素的显示属性设置为隐藏，然后设置button元素的click事件的id触发input元素的click事件。

<!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>

来源

2016-11-16 01:43:52 ywDing

如何将按钮与输入组合？

回答

相关问题