简单问题...如何更改文件输入类型的光标类型?
我尝试过以下方法:
<!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>
Run Code Online (Sandbox Code Playgroud)
出于某种原因,它不会打球.
End*_*ess 37
知道这是一个旧线程.但谷歌的结果带来了这个......我刚刚找到了一个部分解决方案的铬(不是invalving flash,javascript,溢出隐藏的额外DOM操作)
.
input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
cursor: pointer;
}
Run Code Online (Sandbox Code Playgroud)
问题是按钮一般不会继承游标属性(?),而是输入[type = file]字段的其余部分.这就是为什么chrome除了按钮之外还有指针
Lew*_*wis 37
cursor:pointer
仅因为默认按钮而无法对输入文件起作用.这里没有特别的理由.您需要通过此代码删除其外观,注意font-size:0
.
input[type='file']{
opacity: 0;
cursor: pointer;
width: 24px;
height: 24px;
font-size: 0;
position: absolute;
}
Run Code Online (Sandbox Code Playgroud)
<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=" />
Run Code Online (Sandbox Code Playgroud)
它在Chrome,Firefox和IE上运行良好.
mad*_*tyn 18
我今天遇到了这个问题并且:
/* 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;
}
Run Code Online (Sandbox Code Playgroud)
好像很好:-)
Par*_*Par 10
如果 你想强制光标移动以便将它放在图像上,这里有一个
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
Run Code Online (Sandbox Code Playgroud)
JQuery的:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
Run Code Online (Sandbox Code Playgroud)
然后你可以按任意按钮上传文件,你有一个指针光标.
在Chrome和Opera中,光标只是填充的指针,如果display:block;
这就是为什么对于那些浏览器你应该这样做:
<input type="file" id="file1" name="file1" style="display:block; padding:29px 0 0 0;" />
Run Code Online (Sandbox Code Playgroud)
我做了以下:
<li>file<input id="file_inp" type="file" /></li>
Run Code Online (Sandbox Code Playgroud)
对于李:
li { /*...*/ position:relative; overflow:hidden; /*...*/ }
Run Code Online (Sandbox Code Playgroud)
输入:
input#file_inp {
/*...*/
position: absolute;
width: 400px;
left: -200px;
top:0;
cursor: pointer;
/*...*/
}
Run Code Online (Sandbox Code Playgroud)
如前所述,光标在整个输入上变为"指针",不包括按钮.在大多数浏览器中,按钮位于左侧或右侧.好!让我们给输入一个巨大的宽度,只显示中间...按钮将被隐藏.而clickable是整个输入.
这对我行得通.