CSS 光标：指针
我这里有这段代码
.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;
}<span class="file-wrapper">
<input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span>
</span>在 Safari 和 Google Chrome 浏览器中，它不将光标显示为指针，那么这是怎么回事呢？
I have this code over here
.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;
}<span class="file-wrapper">
<input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span>
</span>in Safari and Google chrome browsers it does not show the cursor as pointer, so what's wrong?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
的样式设置可能是偶然的。由于安全问题，许多功能从这些字段中删除，包括一些 CSS 样式功能。这是因为，如果文件输入字段的样式可以设置为看起来像其他内容，则恶意网站可能会诱骗用户无意中上传文件。
文件输入字段禁用的确切功能因浏览器而异，因此我的猜测是，在基于 Webkit 的浏览器中，这些字段的
cursor样式被禁用，但在其他浏览器中则不然。我可以在您的 Fiddle 中看到，您已经做出了相当大的努力，通过在文件输入字段顶部覆盖一个按钮来绕过其中一些限制，但我的猜测是，光标限制将更难解决。
如果是这样的话，那么你就只能忍受了。
Styling a
<input type='file'>can be hit-and-miss.A lot of functionality is removed from these fields, due to security issues, including some CSS styling functionality. This is because if a file input field can be styled to look like something else, it may be possible for a malicious site to trick users into uploading files without intending to.
The exact features which are disabled for file input fields varies between browsers, so my guess is that the
cursorstyle is disabled for these fields in Webkit-based browsers but not in other browsers.I can see in your Fiddle that you've made quite an effort to get around some of these restrictions by overlaying a button on top of your file input field, but my guess is that the cursor restriction is going to be harder to work around.
If this is the case, then it is something you are just going to have to live with.