您现在的位置是：网站首页> 编程资料编程资料
input file自定义按钮美化(演示)_HTML/Xhtml_网页制作_
2021-09-13
993人已围观
简介 如果可以不要看到路径，只显示自定义按钮，另有其方法，下面只是用用了css的技巧来实现,这里可以看出来css是多么的强大啊
以前写过这样的文章但是用了js脚本，优点是可以显示文件路径。
如果可以不要看到路径，只显示自定义按钮，另有其方法，下面只是用用了css的技巧来实现。
关键是给file文件域给了font-size,设置一个比较大的值，使其表单大写发生改变（各浏览器外观不同，但大写都改变了）如下图：
input{font-size:100px;}
再用position定位，和透明度达到自己想要的效果。具体代码如下：
复制代码
代码如下:.fileInputContainer{
height:256px;
background:url(//img.jbzj.com/file_images/article/201212/2012122514125641.png);
position:relative;
width: 256px;
}
.fileInput{
height:256px;
overflow: hidden;
font-size: 300px;
position:absolute;
right:0;
top:0;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
}
复制代码
代码如下:DEMO:
相关内容
- 谈html mailto(电子邮件)实际应用_HTML/Xhtml_网页制作_
- this.parentNode.parentNode(父节点的父节点)是什么意思_HTML/Xhtml_网页制作_
- HTML相对路径(Relative Path)和绝对路径(Absolute Path)深入理解_HTML/Xhtml_网页制作_
- 表格(TABLE)标记(TAGS)详细介绍_HTML/Xhtml_网页制作_
- html 隐藏div HTML里隐藏表格TABLE或者DIV内容的css样式_HTML/Xhtml_网页制作_
- html text的常用事件和方法详细描述_HTML/Xhtml_网页制作_
- select的最佳预设打造全兼容各浏览器select_HTML/Xhtml_网页制作_
- 禁止input文本框输入实现属性_HTML/Xhtml_网页制作_
- DHTML 对象(各种 HTML 对象常用属性)_HTML/Xhtml_网页制作_
- 一篇文章教你学会HTML_HTML/Xhtml_网页制作_
