input[name='file'] cursor: pointer 在不同浏览器处理方法

最新推荐文章于 2022-07-18 15:42:54 发布
原创 最新推荐文章于 2022-07-18 15:42:54 发布 · 765 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种简单的方法来解决input[type=file]透明度为零后，自定义上传按钮在不同浏览器中表现不一致的问题。只需设置字体大小为0即可实现跨浏览器兼容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

大家是否发现让input[type="file"]透明度为零，然后写了个上传按钮样式，设置了cursor:pointer，在非Ie浏览器里有效，其他浏览器里没有效果，怎么办？

其实很简单，只要设置input[type="file"] 的font-size:0;就解决了这个问题。

input[type="file"]样式修改
feinifi的博客
01-30 2万+
默认情况下，html中的<input type="file"/>标签展示的效果是自带的，为了美观和体验，我们需要对他进行一番修饰，让他看起来，更加的优雅。修饰的思路是，让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位，然后让input元素绝对定位，并且可见度为0，就是看不见，但是点击也能出现选择文件的效果，input元素...
input框type=file设置cursor:pointer的问题
weixin_30405421的博客
03-14 214
为了让美化上传文件框，设置了cursor:pointer;,然而不起作用，设置font-size:0，这样就可以了。 转载于:https://www.cnblogs.com/mmykdbc/p/10531976.html
input元素type=file中cursor:pointer无效
芊芊寻的博客
05-03 6699
遇到file元素设置cursor:pointer无效的情况，经测试，在chrome下可以通过设置font-size:0;解决 input[type='file']{ cursor: pointer; font-size: 0; }  
上传文件时候 input 悬停cursor：pointer 无效解决办法
josiecici的博客
06-02 990
给input框的font-size设置成0 即可成功设置成pointer样式
2021-10-14 原生input file上传按钮,设置cursor:pointer失效
wyt163557的博客
10-14 379
解决方法:font-size:0。
css input[type=file] 样式美化(input上传文件样式 )
09-24
需要注意的是，由于安全和浏览器兼容性问题，直接对`input[type=file]`进行样式定制存在一定的限制。例如，不能更改文件选择对话框的外观，也不能阻止其弹出。但是，通过CSS，我们可以让这个元素看起来像是网站设计...
CSS美化 input type=file 兼容各个浏览器
09-25
在网页设计中，CSS美化`<input type="file">`元素常常是一项挑战，因为不同的浏览器对这个元素的默认样式和行为处理方式各异。为了解决这个问题，开发者们需要找到一种跨浏览器的解决方案来统一表现。这里介绍一种纯...
input type=file 显示的浏览 改成英文
06-30
然而，这种方法并不兼容所有浏览器，且需要JavaScript来处理不同浏览器的差异。 ```html input[type="file"] { opacity: 0; /* 隐藏原始控件 */ position: absolute; /* 使控件脱离文档流 */ } input...
参考以下样式.btn:hover { background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%); } .btn{ line-height: 30px; margin-top: 30px; width: 130px; height: 30px; border-radius: 13px; outline: none; border: none; background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%); color: #FFFFFF; cursor: pointer; /*按钮为手型*/ }将 <input name = "file" type="file" id="file1" style="display: none;" accept=".xls*"> <label for="file1" class="custom-file-upload">选择文件</label>的样式修改为与其一样大小和样式的代码
07-15
<input name="file" type="file" id="file1" style="display: none;" accept=".xls*"> <label for="file1" class="custom-file-upload btn">选择文件 ``` CSS代码： ```css .btn:hover { background-image: linear...
火狐等 浏览器 不支持Cursor:hand的写法的解决方法
03-16 199
在CSS中手型指针有cursor:hand和cursor:pointer两种写法,其中 cursor:hand在FireFox中不支持,返回错误! 只要使用cursor:pointer即可解决问题，FF和IE都支持,且Google的浏览器也 支持！cursor:pointer应该是符合W3C标准的。 cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效...
input file cursor 不生效
艾米栗的代码天地
07-18 633
input file cusor 失效
input 中 type="file"时cursor:pointer指针属性失效问题
icebns的博客
09-26 834
解决方案： cursor:pointer; font-size:0; 在input中加入样式font-size:0;即可。
IE中的cursor存在的bug
迟到的程序猿
06-08 1439
 css部分: #slider {  position: absolute;  width: 860px;   left: -450px;  overflow: hidden;  background: #FFF;  border: 20px solid #FFFFFF; } .headClass{  display:block;  width:75px;  heig
如何设置兼容各个浏览器的鼠标手型效果？
江南孤鹜——“知行合一”的Software Developer
05-22 1809
问题描述 设置HTML元素的style属性cursor值为hand，在IE6、IE8、opera浏览器中，鼠标移上去可以变成手型，但是在IE9、Chrome中鼠标仍然显示为指针的样式。 <a href="#" style="cursor:hand">CSS鼠标手型效果</a>解决方案 pointer跟hand一样，也是手型效果，这里推荐使用pointer，因为这可以在多种浏览器下使用。
div添加cursor:pointer；失效问题
HuangsTing的博客
05-21 7585
添加z-index:99;
火狐和谷歌不支持Cursor:hand的写法的解决方法
11-18 4608
在CSS中手型指针有cursor:hand和cursor:pointer两种写法,其中cursor:hand在FireFox中不支持,返回错误! 只要使用cursor:pointer即可解决问题，FF和IE都支持,且Google的浏览器也支持！cursor:pointer应该是符合W3C标准的。 cursor:hand ：IE完全支持。但是在firefox是不支持的，没有效果。 cursor:po
input标签 file 属性 样式修改 未选择文件去掉 解决一种办法
qq_33049827的博客
08-19 1663
input file 样式太丑，想要自定义咋办。百度搜了半天，找到一个办法。 首先定义一个按钮，动作指向input id=file <label for="file" style="cursor:pointer;text-decoration: underline">点击上传</label> 然后把input file隐藏 <input type="file" id="file" style="opacity: 0;" accept="image/png" multiple
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值