Html 更改输入类型上的光标类型="；文件"；
简单的问题。。。如何更改文件输入类型上的光标类型 我尝试了以下方法：Html 更改输入类型上的光标类型="；文件"；,html,css,input,Html,Css,Input,简单的问题。。。如何更改文件输入类型上的光标类型 我尝试了以下方法： <!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"] {
<!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>
<li>file<input id="file_inp" type="file" /></li>
输入[type=“file”]{
光标：指针；
}
由于某种原因，它不会打球 首先，您的代码可以在Internet Explorer上运行，但不能在Firefox上运行 第二，W3CCSS标准不允许设置复杂标记的样式，如
最后，看。我没有尝试他的解决方案，所以请告诉我们它是否有效以及如何工作。它在不同浏览器中的工作方式不同。我想这是因为文件输入类型非常特殊 您使用什么浏览器/版本 我知道IE6不支持在样式中指定类型 它在不同浏览器中的工作原理 IE7+ 工作完美 火狐 问题已经解决，所以现在它可以完美地工作。有关此问题，请参阅。
在3.5版中，它根本不起作用 Chrome和Safari（行为相同） 在按钮上使用箭头，但在其余按钮上使用定义的光标 歌剧院 工作完美
请注意，有几个解决方法使用不同的技术来解决这个问题。这是一个我喜欢的优雅解决方案，适用于所有主流浏览器。尝试使用：
input[type=file] {
cursor: pointer; cursor: hand;
}
看看这是否有效。我不得不把指针+指针放在我的手心里，以使它在FF/Chrome/等中工作。此外，我不确定这是否重要，但我认为css中的“文件”周围没有引号。如果你尝试使用Ajax上传器，你可以尝试其他兼容浏览器的技术，如FireFox和Chrome。它们支持在完全不可见的文件输入上触发单击事件。除了将文件的“显示”属性设置为“无”外，您可以按任何方式隐藏文件输入。在父窗体上设置{height:0；overflow:hidden}就可以了。我为每个上传者使用单独的表单 将自定义按钮单击事件重定向到隐藏文件输入，您就完成了 要使用此技术，必须对Gecko或WebKit引擎执行navigator.userAgent检查。对于其他引擎，您必须使用旧的透明文件输入方法。我做了以下操作：
<!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>
<li>file<input id="file_inp" type="file" /></li>
input#file_inp {
/*...*/
position: absolute;
width: 400px;
left: -200px;
top:0;
cursor: pointer;
/*...*/
}
在Chrome和Opera中，光标仅成为填充上的指针，如果
display:block，这就是为什么对于这些浏览器，您应该这样做：
<input type="file" id="file1" name="file1" style="display:block; padding:29px 0 0 0;" />
选择图像
css:
.btn{游标：指针；}
你可以在这里看到它的作用：
不是jquery在做这件事。这是文件。我刚刚从中获得了我所需要的东西，它在没有任何jquery的情况下工作得非常好。Chrome也给了我这个问题。我试图设置各种各样的CSS选择器，但似乎没有什么效果。然而，我确实通过使用FORM元素找到了一个解决方案
将输入命名为[type=file]元素
命名表单元素并将输入[type=file]放入其中
创建一个跨距，并将其放置在表单中输入的下方。这将是你的标签
使用CSS将输入的高度设置为0px，不透明度设置为0，这将使其不可见
使跨距绝对定位并向左0px
#文件{
高度：0px；
不透明度：0；
}
#跨度{
左：0px；
位置：绝对位置；
光标：指针；
}
我的文件标签！！！！
var span=document.getElementById（“span”）；
span.onclick=函数（事件）{
document.form.file.click（事件）；
};
我在Chrome和FF中测试了这个，不是ie，但我希望这有帮助。
jsfiddle我发现还有另一种方法可以做到这一点。在Opera New、FF、Chrome和Safari中完美运行。不幸的是，它在IE中并不完美（但对我来说已经足够好了）
其思想是将input=file
元素包装为固定大小的div和隐藏的溢出，并设置cursor:pointer。然后使用左填充将按钮移到div之外
<div class="input-file-wrap">
<input class="file-input" type="file" />
</div>
在这里你可以找到一个活生生的例子：知道这是一个旧线程。但是谷歌的搜索结果显示。。。我刚刚找到了一个chrome的部分解决方案（没有禁用flash、javascript、隐藏溢出的额外DOM操作）
- firefox已经解决了这个问题
- safari（目前为7）和chrome没有相同的行为
- safari（7，mac）根本不适合我
- chrome（现在可能是opera，当它是webkit时）可以使用：：webkit文件上传按钮伪类
问题在于，按钮通常不继承游标属性，而是继承输入[type=file]字段的其余部分。
这就是为什么chrome会根据-使用不透明度0隐藏输入来获取除按钮之外的指针
使光标在整个区域上工作的关键是将字体大小设置为大于按钮高度的值，以便将文件输入按钮按到可见区域下方，并将鼠标悬停在文件输入的文本部分：
<div style="display: block; width: 100px; height: 50px; overflow: hidden">
<button style="width: 110px; height: 50px; position: relative; top: -5px; left: -5px;" ><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="height:50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); font-size: 70px; position: relative; top: -50px; left: -20px; cursor:pointer" />
</div>
光标：指针在输入文件上不起作用，只是因为默认按钮。这里没有特别的原因。您需要通过此代码删除其外观，请注意字体大小：0
input[type='file']{
<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>
<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;
}
input[type=file], /* FF, IE7+, chrome (except button) */
input[type=file]::-webkit-file-upload-button { /* chromes and blink button */
cursor: pointer;
}
<div style="display: block; width: 100px; height: 50px; overflow: hidden">
<button style="width: 110px; height: 50px; position: relative; top: -5px; left: -5px;" ><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="height:50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); font-size: 70px; position: relative; top: -50px; left: -20px; cursor:pointer" />
</div>
/* Upoload */
#upload-profile-file {
z-index: 1;
}
.uploadButton input[type="file"] {
cursor:pointer;
position:absolute;
top:0px;
opacity:0;
}
#upload-profile-file:hover ~ #upload-profile-pic-btn
{
text-decoration:underline;
}
#upload-profile-pic-btn {
z-index:-1;
}
<form id="upload-profile-pic-form">
<div class="uploadButton">
<input type="file" id="upload-profile-file" name="upload" style="width: 88px; opacity:0.0; filter:alpha(opacity=0); " onchange='upload()'/>
<a id="upload-profile-pic-btn" href="#" class="expand">Upload</a>
</div>
</form>
/* 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;
}