CSS 如何自定义浏览按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15519223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I customize the browse button?
提问by Manjit Singh
I want to customize (want change background and color etc) the browse button in upload file field.
我想自定义（想要更改背景和颜色等）上传文件字段中的浏览按钮。
<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13">
回答by Cody
You can't. You have to create your own button and trigger the actual input.
你不能。您必须创建自己的按钮并触发实际输入。
Here you can do this using jQuery. See working example.
在这里，您可以使用 jQuery 执行此操作。请参阅工作示例。
HTML:
HTML：
<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Upload File</div>
jQuery:
jQuery：
$("#uploadTrigger").click(function(){
$("#uploadFile").click();
});
CSS:
CSS：
.hidden {
display:none;
}
.button {
border: 1px solid #333;
padding: 10px;
margin: 5px;
background: #777;
color: #fff;
width:75px;
}
.button:hover {
background: #333;
cursor: pointer;
}
回答by Kevin Bowersox
The basic premise behind styling file input buttons is to overlay absolutely positioned controls over the file upload. The file uploads opacity is set to 0, causing it not to show. Its z-index is set above the overlaid controls, while the z-index of the controls is set lower than the file upload. So when the user thinks they are clicking the overlaid controls they are actually clicking the file upload with opacity set to 0.
样式文件输入按钮背后的基本前提是在文件上传上覆盖绝对定位的控件。文件上传不透明度设置为 0，导致它不显示。它的 z-index 设置在叠加控件之上，而控件的 z-index 设置为低于文件上传。因此，当用户认为他们正在单击叠加控件时，他们实际上是在单击不透明度设置为 0 的文件上传。
Here is a really rough example:
这是一个非常粗略的例子：
HTML
HTML
<div id="file-upload-cont">
<input id="original" type="file"/>
<div id="my-button">Find</div>
<input id="overlay"/>
</div>
CSS
CSS
#my-button{
position: absolute;
border: 1px solid black;
background: green;
padding 3px;
width: 50px;
height: 25px;
text-align: center;
left: 148px; /* Positioning over file-upload */
top: 0px;
z-index: 1; /* Lower z-index causes controls to sit under file upload */
}
#overlay{
position: absolute;
z-index: 1; /* Lower z-index causes controls to sit under file upload */
left: 0; /* Positioning over file-upload */
}
#original{
opacity: 0; /* Opacity makes it invisible*/
position: relative;
z-index: 100; /* z-index causes original file upload to sit above other controls*/
}
#file-upload-cont{
position: relative;
}
Working Examplehttp://jsfiddle.net/tP8KY/1/
回答by Manish Mishra
you cannot directly customize the browse button. your CSS won't work upon it.
您不能直接自定义浏览按钮。您的 CSS 将无法处理它。
What you can do is, you can create a button of yours with a textbox to the left of it. customize it, and upon click, trigger the original file upload.
您可以做的是，您可以创建一个带有文本框左侧的按钮。自定义，点击后触发原文件上传。
回答by Code L?ver
Check the following for the changes in browse button:
检查以下浏览按钮的变化：
Hope these links will help you.
希望这些链接对您有所帮助。
