css – 如何自定义浏览按钮?

前端之家收集整理的这篇文章主要介绍了css – 如何自定义浏览按钮?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在上传文件字段中自定义(想要更改背景和颜色等)浏览按钮.
<input type="file" tabindex="6" class="medium" size="20" value="" id="input_5_13" name="input_13">

解决方法

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

在这里你可以使用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;
}

猜你在找的CSS相关文章