如何自定义浏览按钮？

Question

我想在上传文件字段中自定义（想要更改背景和颜色等）浏览按钮。

<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13">

Answer 1

你做不到。您必须创建自己的按钮并触发实际输入。

在这里你可以使用jQuery来做到这一点。见working example.

HTML：

<input type="file" class="hidden" id="uploadFile"/>
<div class="button" id="uploadTrigger">Upload File</div>

jQuery的：

$("#uploadTrigger").click(function(){
   $("#uploadFile").click();
});

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;
}

Answer 2

样式文件输入按钮背后的基本前提是在文件上传上叠加绝对定位的控件。文件上传不透明度设置为0，导致它不显示。它的z-index设置在重叠控件之上，而控件的z-index设置为低于文件上载。因此，当用户认为他们点击了重叠的控件时，他们实际上是单击了不透明度设置为0的文件上传。

这是一个非常粗略的例子：

<强> HTML

<div id="file-upload-cont">
    <input id="original" type="file"/>
    <div id="my-button">Find</div>
    <input id="overlay"/>
</div>

<强> 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;
}

工作示例 http://jsfiddle.net/tP8KY/1/

Answer 3

您无法直接自定义浏览按钮。你的CSS无法使用它。

您可以做的是，您可以使用左侧的文本框创建自己的按钮。自定义它，并在单击时触发原始文件上载。

请参阅此link和this

Answer 4

检查以下内容以了解浏览按钮中的更改：

1. Browse button css
2. Browse button design

希望这些链接能为您提供帮助。