css美化input file按钮的代码方法-侯体宗的博客

css美化input file按钮的代码方法
前端 / 管理员发布于 8年前 253

input file在系统默认下的外观：
我们最多通过定义input的border来改变系统默认的外观：
如果要让浏览按钮更漂亮一点，我们想定义它的背景颜色，甚至想用背景图片来代替，通过css定义input flie还真是办不到的。偶然看到一篇文章：input file 文件选择框美化作者是把系统默认的按钮设置透明度为0，再定义一个label标签样式，来覆盖透明掉的按钮。
按照作者的方法，我也试验了一下，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>input file的另类做法</title> <style type="text/css">  </style> </head> <body> <div class="line"> <span> <label>上传文件：</label> <input name="" type="text" id="viewfile" onmouseout="document.getElementById('upload').style.display='none';" class="inputstyle" /> </span> <label for="unload" onmouseover="document.getElementById('upload').style.display='block';" class="file1">浏览...</label> <input type="file" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" id="upload" />  </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
效果:
虽然多了很多标签，但这种偷梁换柱的做法还是值得研究。有没有更好、更科学的作法还有待发掘。

上一条：
重置默认样式 css reset第1/2页
下一条：
CSS之少用继承，多用组合

0条评论 (评论内容有缓存机制,请悉知!)

最新最热

相关文章
使用 Alpine.js 排序插件对元素进行排序(0个评论)
在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
使用mock-server实现模拟接口对接流程步骤(0个评论)
vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)

近期文章
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus(0个评论)
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用(0个评论)
Apifox桌面端被曝遭供应链投毒：CDN 脚本被篡改，窃取 SSH 密钥与 Git 凭证(0个评论)
在go语言中实现字符串可逆性压缩及解压缩功能(0个评论)
使用go + gin + jwt + qrcode实现网站生成登录二维码在app中扫码登录功能(0个评论)
在windows10中升级go版本至1.24后LiteIDE的Ctrl+左击无法跳转问题解决方案(0个评论)
智能合约Solidity学习CryptoZombie第四课:僵尸作战系统(0个评论)
智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)

近期评论
test1 在
opencode + Oh-my-openagent,我的第一个免费的ai编程智能体管家:Sisyphus中评论 test..
122 在
学历：一种延缓就业设计，生活需求下的权衡之选中评论工作几年后，报名考研了，到现在还没认真学习备考，迷茫中。作为一名北漂互联网打工人..
Zita 在
Google AI Studio升级全栈 vibe coding体验，可直接构建带登录和数据库的应用中评论 111222..
123 在
Clash for Windows作者删库跑路了，github已404中评论按理说只要你在国内，所有的流量进出都在监控范围内，不管你怎么隐藏也没用，想搞你分..
原梓番博客在
在Laravel框架中使用模型Model分表最简单的方法中评论好久好久都没看友情链接申请了，今天刚看，已经添加。..

Top