给上传文件的input控件"美容"
2018-06-24 01:17:24来源:未知 阅读 ()
作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西。然而表单的其他input控件样式还是很好改变的。但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮。刚好菜鸟我最近工作中也遇到了这个问题。解决以后想着人生在于总结。于是乎就把这个简单的demo记录下来。
html代码
<form action=""method="post"enctype="multipart/form-data"> <a href="#" class="a-upload"><input type="file" name="file" id="file">点击这里上传图片</a> </form>
css代码
.a-upload { padding: 4px 10px; width: 200px; height: 30px; box-sizing: border-box; line-height: 20px; position: relative; cursor: pointer; color: #888; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; display: inline-block; *display: inline; *zoom: 1; top: 5px; } .a-upload input { position: absolute; font-size: 100px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; width: 200px; height: 30px; left: 0; top: 0; } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none }
结果
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 解决 vs code 打开文件总是只有一个tab标签页,新打开的tab 2020-04-23
- 如何配置Tomcat上web.xml让浏览器能直接下载txt,xml类型文 2020-04-14
- 2.reset.css文件 2020-04-08
- 常见form表单5种input输入类型 2020-03-29
- 如何利用 githob 上传自己的网站 2020-03-01
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash