当前位置：移动技术网 > IT编程>网页制作>CSS > css美化input file按钮的代码方法

css美化input file按钮的代码方法

2017年12月08日 | 移动技术网IT编程 | 我要评论

重生之网游无限,美丽淘时尚购物网,画笔海岭在哪

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"> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:]

效果:

虽然多了很多标签，但这种偷梁换柱的做法还是值得研究。有没有更好、更科学的作法还有待发掘。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Layer UI表格列日期格式化及取消自动填充日期

Layer UI表格列日期格式化方法较为强大也比较简单针对需要格式化的表格列添加以下代码即可 ,templet : "<div&g... [阅读全文]
整理高度塌陷与BFC

当面试官问道你高度塌陷时，人们第一想到的方法一定是 .clearfix::after { content: ''; display: b... [阅读全文]
CSS的行内元素和块类元素

块级元素行内元素块级元素和行内元素的区别行内块标签 inline block 标签显示模式转换 display ... [阅读全文]
[书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享

写在前面书籍介绍：本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计，使页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏... [阅读全文]
餐饮类网站滑动导航

<!DOCTYPE html> <html lang="en"> <head&g... [阅读全文]
商城类网站头部导航

效果 <!DOCTYPE html> <html lang="en"> <hea... [阅读全文]
使用CSS完成商城首页的优化

使用CSS完成网站首页的优化需求分析由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化表格布局的缺陷 1. 嵌套... [阅读全文]
使用CSS完成注册界面的优化

使用DIV+CSS完成注册页面的优化需求分析由于我们的注册页面也是用table布局的,存在与首页同样的问题,所以我们需要使用div+css对我们的注... [阅读全文]
HTML连载86-添加视频、伸缩布局

一、复习了伸缩布局 <!DOCTYPE html> <html lang="en"> <head>... [阅读全文]
0基础怎么学web前端？新手到大神的进阶路线在这！

结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初... [阅读全文]

网友评论


验证码：

css美化input file按钮的代码方法

2017年12月08日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论