html – 光标:指针属性不适用于Webkit浏览器中的文件上传按钮
发布时间:2020-12-14 21:28:08 所属栏目:资源 来源:网络整理
导读:我有CSS代码,在Safari浏览器和Chrome浏览器上并不能正常工作 如果你想要在这里的实例是http://jsfiddle.net/mnjKX/1/ 我有这个CSS代码 .file-wrapper { cursor: pointer; display: inline-block; overflow: hidden; position: relative;}.file-wrapper inpu
我有CSS代码,在Safari浏览器和Chrome浏览器上并不能正常工作
如果你想要在这里的实例是http://jsfiddle.net/mnjKX/1/ 我有这个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; } 和这个HTML代码: <span class="file-wrapper"> <input type="file" name="photo" id="photo" /> <span class="button">Choose a Photo</span> </span> 此代码显示隐藏的输入文件标签, 我如何解决它或绕过/超越这个? 解决方法
对于初学者,如果您从输入规则中移除高度声明,则它可以在Chrome中运行。
现场演示:http://jsfiddle.net/mnjKX/16/ 但这个透明的输入字段是一个黑客的地狱…我不会依赖它。 更新: 这里是正确的解决方案: ::-webkit-file-upload-button { cursor:pointer; } 我以为文件上传按钮是不可达的,但Chrome的用户代理样式表证明我的错误:) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |