简单的问题...如何改变文件输入类型的光标类型？
我尝试了以下方法:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
input[type="file"] {
cursor: pointer;
}
</style>
</head>
<body>
<input type="file">
</body>
</html>
由于某些原因，它不会运作。
虽然这是一篇旧帖子，但谷歌的搜索结果将其带了上来...我刚刚发现了 Chrome 的部分解决方案（不涉及 Flash、JavaScript、额外的 DOM 操作和 overflow hidden）
.
input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
cursor: pointer;
}
问题在于通常按钮不会继承光标属性(?)，但是其他的input[type=file]字段会。这就是为什么Chrome除了按钮之外都有指针的原因。
cursor:pointer 在输入文件上不起作用，仅因默认按钮而已。没有特殊原因。您需要使用此代码移除其外观，注意 font-size:0。
input[type='file']{
opacity: 0;
cursor: pointer;
width: 24px;
height: 24px;
font-size: 0;
position: absolute;
}<input type="file">
<img width="24" height="24" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAADs0lEQVR42rWVa2iOYRjH9+zd+dw2oWaGwkjzRY5flDC1nBaxsTnVYkaWc8oHoZalETWHsVGkZo0yIyEmGzkWpZhDbBhmxE7v63fp/0j7YGq89e/+XfdzuJ7/dV/3/Tp+//nndHdD2o4RIQHBnilgIPL3+XytjuO0MkZ4O3zllevve3uUYMaulDxeePL0mruNXeaTmJ/IfMlfJZhekBLv+PuNBEPRq8427wN/jxPmeJxM4seoAH0yF+g9WonmVOTfK+o2weTNyZ6w2KC9fNFuQtz7AuF0+DV8Ft4GZ6OvxPXE7xlLGZ8wF4CLK39MMLNwZDoPJPPAHcJwOAiOhp/Ct+Ba3d9J/I3YEjUzTmNuNuwHd8DtcAg8FK4ica2jeuYyFKM4cyB1aGEz0BoUYw6QLWoEakLLUY25UOl+foSubaB8O1wHmWS+R+YadUojbEmi4WjYo4Rv5SCWMdic2LzYEjfBAXAynImDI78nqOXCWcIk2KsHgmB/+ARs6/BE8UDGuYw5KmkbfA5O1QckwfNJUOqWaCnDdVRuL5WsXO1oobrIXpYgJ9W6N9VKgdZRjmreUwqPReYgg7mjroMlZL5K5v2E8XA/2JKshc9okfui78QNxLaYdxgteQkcCVfCW+HX8LiuDqwFr6Ey1B/1Rm/QMJSP8lCkus4cNNheQbt032G5s4+qR8PRIhwccB1kk/kmmSsIB8GdcDVfkEbyU/B45ntZt3Ctg9icfGQ8zdwW+AY8WG36UA7m8XyZm2CxbrqkElmC2/AE+DKcCMeaC/W8nUUtWthVcJ0WtlXNMhmeS4LjXbvoolmF22ErwSh4BTzTuguFaRPadm9iXG0NAFfA1hQvtEaT4CwSHHLXYBHDLWQJ4lXnp2ifuuUYStRC2zPB6LwdYagQzdImeydNtaOFNTjoOsiSTXuot3q9BW6Bc+E62Hb7EOJQ4irGYsY5zO2E4+FmrYE5GA0vsJPWTbBMtbZWG6AyeJXgkxbTDsKXWoPBKp3tn2DY0c5vhp/BY7TIv9p0idrUNlAfnS3uUW6J3uqsaZM8OnPsQAyRfLr3g1rd2rTYdZAjB0WyGadzphHuBQfqhd+I39jX6p5OObCjIspaWQ7NQQ4OitwEm7hQRMYvfv/gx/vM2UIS7HFLtFG7tUUd1C67Udqdn63HVYpoufmuebtuR/kXlS9cu3w7H3zBTWB/laOxlqDNlABbu37VUWw9bn+lIdrBnxljbMPpno/6w7Hj/B383E4GEjzq9k+/p78fan0xNyGwEGgAAAAASUVORK5CYII=" />它可以在Chrome、Firefox和IE上完美地运行。
<input type="file"/>元素设置光标样式有关，无论是在全局样式部分/文件中设置还是直接在HTML标签上设置。 - awe/* Chrome/Safari and web-kit-based browsers
(if it doesn't work, try maybe also on the parent/wrapper)
*/
::-webkit-file-upload-button {
cursor:pointer;
}
/* IE11 (if it doesn't work, try maybe also on the parent/wrapper) */
input[type=file] {
cursor:pointer;
}
看起来它运行正常 :-)
如果您想要强制光标变成手形以便将其放在图片上，这是一个
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery：
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
您可以按任意按钮上传文件，此时您将看到一个指针光标。
在Chrome和Opera中，只有在填充区域上光标才会变成指针，如果使用display:block;，因此对于这些浏览器，您应该进行以下操作:
<input type="file" id="file1" name="file1" style="display:block; padding:29px 0 0 0;" />
我做了如下操作：
<li>file<input id="file_inp" type="file" /></li>
对于li：
li { /*...*/ position:relative; overflow:hidden; /*...*/ }
对于输入：
input#file_inp {
/*...*/
position: absolute;
width: 400px;
left: -200px;
top:0;
cursor: pointer;
/*...*/
}
这对我来说可以使用。
width: 100%、height: 300% 和 top: -200% 设置了起来。这样无论父级 li 的大小如何，按钮都会在容器上方，并且整个容器仍然被输入元素覆盖。 - Jargs<div class="input-file-wrap">
<input class="file-input" type="file" />
</div>
和示例样式
.input-file-wrap {
background: red;
height: 33px;
width: 240px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.file-input {
width: 100%;
height: 100%;
opacity: 0;
padding-left: 240px;
margin-right: -240px;
cursor: pointer;
}
<style>
#file {
height:0px;
opacity:0;
}
#span {
left:0px;
position:absolute;
cursor: pointer;
}
</style>
<form name="form">
<input type="file" id="file" name="file"/>
<span id="span">My File label!!!!</span>
</form>
<script>
var span = document.getElementById("span");
span.onclick = function(event) {
document.form.file.click(event);
};
</script>
我在Chrome和FF中测试过了，但没有在ie中测试。希望这能帮到你。
jsfiddle http://jsfiddle.net/aressler38/L5r8L/1/
<label class="file-label" ng-if="!$ctrl.multiple" for="file">{{'BUTTON.CHOOSEFILE' | translate}}</label>在Chrome和IE上运行得非常好。 - jsPlayerfont-size: 0;就是我所需的全部。 - pjdavis