文件上传按钮的跨浏览器自定义样式
文件上传按钮的跨浏览器自定义样式
提问于 2014-02-18 08:52:17
我正在尝试设计一个符合我个人喜好的文件上传按钮，但是如果没有JS，我找不到任何可靠的方法来做到这一点。我确实找到了关于这个主题的two other问题，但那里的答案要么涉及JavaScript，要么建议使用Quirksmode's approach。
我对这种Quirksmode方法的主要问题是，文件按钮仍然具有浏览器定义的尺寸，因此它不会自动调整为放置在其下方的按钮。我已经写了一些基于它的代码，但它只会占用文件按钮通常占用的空间，所以它根本不会像我想要的那样填充父div。
HTML：
<div class="myLabel">
<input type="file"/>
<span>My Label</span>
</div>CSS:
.myLabel {
position: relative;
}
.myLabel input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}展示了这种方法是多么的有缺陷。在Chrome浏览器中，点击第二个演示按钮下面的!!将打开文件对话框，但在所有其他浏览器中，文件按钮不会占据按钮的正确区域。
有没有更可靠的方法来设计文件上传按钮的样式，不需要任何JavaScript，最好使用尽可能少的“hacky”代码(因为黑客通常会带来其他问题，比如小提琴中的问题)？
回答 6
Stack Overflow用户
发布于 2014-12-01 03:09:08
请在下面找到一种适用于所有浏览器的方法。基本上，我将输入放在图像的顶部。我使用font-size让它变得很大，所以用户总是点击upload按钮。
.myFile {
position: relative;
overflow: hidden;
float: left;
clear: left;
}
.myFile input[type="file"] {
display: block;
position: absolute;
top: 0;
right: 0;
opacity: 0;
font-size: 100px;
filter: alpha(opacity=0);
cursor: pointer;
}<label class="myFile">
<img src="http://wscont1.apps.microsoft.com/winstore/1x/c37a9d99-6698-4339-acf3-c01daa75fb65/Icon.13385.png" alt="" />
<input type="file" />
</label>
Stack Overflow用户
发布于 2014-08-06 09:59:23
最好的例子就是这个，没有隐藏，没有jQuery，它完全是纯CSS
http://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}<input type="file" class="custom-file-input">
Stack Overflow用户
发布于 2014-02-18 12:52:05
这似乎很好地解决了业务问题。A fidde is here:
HTML
<label for="upload-file">A proper input label</label>
<div class="upload-button">
<div class="upload-cover">
Upload text or whatevers
</div>
<!-- this is later in the source so it'll be "on top" -->
<input name="upload-file" type="file" />
</div> <!-- .upload-button -->CSS
/* first things first - get your box-model straight*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
label {
/* just positioning */
float: left;
margin-bottom: .5em;
}
.upload-button {
/* key */
position: relative;
overflow: hidden;
/* just positioning */
float: left;
clear: left;
}
.upload-cover {
/* basically just style this however you want - the overlaying file upload should spread out and fill whatever you turn this into */
background-color: gray;
text-align: center;
padding: .5em 1em;
border-radius: 2em;
border: 5px solid rgba(0,0,0,.1);
cursor: pointer;
}
.upload-button input[type="file"] {
display: block;
position: absolute;
top: 0; left: 0;
margin-left: -75px; /* gets that button with no-pointer-cursor off to the left and out of the way */
width: 200%; /* over compensates for the above - I would use calc or sass math if not here*/
height: 100%;
opacity: .2; /* left this here so you could see. Make it 0 */
cursor: pointer;
border: 1px solid red;
}
.upload-button:hover .upload-cover {
background-color: #f06;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21842274
复制相关文章
相似问题
腾讯云开发者
