8

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

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

详见附件

4

4 回答 4

16

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

在这里，您可以使用 jQuery 执行此操作。请参阅工作示例。

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;
}
于 2013-03-20T09:16:53.397 回答
1

样式文件输入按钮的基本前提是在文件上传上覆盖绝对定位的控件。文件上传不透明度设置为 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/

于 2013-03-20T09:19:42.540 回答
0

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

您可以做的是，您可以在其左侧创建一个带有文本框的按钮。自定义它，点击后触发原始文件上传。

看到这个链接和这个

于 2013-03-20T09:09:29.220 回答
0

检查以下浏览按钮的更改：

  1. 浏览按钮 css
  2. 浏览按钮设计

希望这些链接对您有所帮助。

于 2013-03-20T09:10:16.400 回答