cursor:pointer属性不适用于Webkit浏览器中的文件上传按钮 [英] The cursor:pointer property doesn't apply to file upload buttons in Webkit browsers
问题描述
我有CSS代码,并不真正工作在webkit浏览器,如safari和chrome
如果你想在这里的实例是 http://jsfiddle.net/mnjKX/1/
我有此CSS代码
.file-wrapper {
cursor:pointer;
显示:inline-block;
overflow:hidden;
position:relative;
}
.file-wrapper输入{
cursor:pointer;
font-size:100px;
height:100%;
filter:alpha(opacity = 1);
-moz-opacity:0.01;
opacity:0.01;
position:absolute;
right:0;
top:0;
}
.file-wrapper .button {
background:#79130e;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:11px;
font-weight:bold;
margin-right:5px;
padding:4px 18px;
text-transform:uppercase;
}
和此HTML代码:
< span class =file-wrapper>
< input type =filename =photoid =photo/>
< span class =button>选择照片< / span>
< / span>
此代码显示隐藏的输入文件标记,
这里的问题是游标:指针在webkit浏览器上不起作用,
我如何解决它或绕过/超过这个?
对于初学者,如果您从输入中删除
height
>规则。
在线演示: http://jsfiddle.net/mnjKX/16/
但这个透明的输入字段是一个黑客的地狱...我不会'
更新: $ b
这里是正确的解决方案:
:: - webkit-file-upload-button {cursor:pointer ; }
我认为文件上传按钮不可访问,但Chrome的用户代理样式表证明我的错误:)
i have CSS code that does not really work on webkit browsers such as safari and chrome
if you want live example here it is http://jsfiddle.net/mnjKX/1/
i have this CSS code
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #79130e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
padding: 4px 18px;
text-transform: uppercase;
}
and this HTML code :
<span class="file-wrapper">
<input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span>
</span>
this code shows hidden input file tag , the problem here is that the cursor:pointer is does not work on webkit browsers ,
how can i solve it or bypass / overtake this ?
For starters, it works in Chrome if you remove the height
declaration from the input
rule.
Live demo: http://jsfiddle.net/mnjKX/16/
But this transparent input field is a hell of a hack... I wouldn't rely on it.
Update:
And here is the proper solution:
::-webkit-file-upload-button { cursor:pointer; }
I thought the file upload button is unreachable, but Chrome's user agent style sheet proved my wrong :)
这篇关于cursor:pointer属性不适用于Webkit浏览器中的文件上传按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!