file html5 样式,CSS小技巧之自定义个性的file表单样式

每当看到别人家的东西，总是那么的优美，他们的是这样的：

再想想自己家的是这样的。

样式没个性就算了，还那么多的废字，今天我们分享的就是如何把file表单做的漂亮些，废话不多说，直接进入正题。

其实当初自己的理解无非是利用postion来制作，但是后来看看网上很多朋友是把file表单的opacity设置成透明，然后在上面覆盖一层，但是发现这样对齐并不是很好，后来在张鑫旭博客看到他用的是label，然后直接通过CSS的clip属性来裁剪显示区域，这样就不用设置透明，就可以方便的设置成可视区域0，这样表单file就看不到，点不到了，那么接下来直接上代码：

Demo

body{font-family: '微软雅黑'; font-size: 14px; margin: 0; padding: 0;}

.md_f{margin: 20px;}

.files{display: inline-block; border-radius: 4px; padding: 10px 10px; border: 0; background-color: #f66; color: #fff; position: relative; z-index: 2;}

.files:hover{opacity: 0.8; cursor: pointer;}

#files{position: absolute; clip:rect(0 0 0 0);}

上传文件

file html5 样式,CSS小技巧之自定义个性的file表单样式相关推荐

精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
css盒模型、布局模型、 flex弹性盒模型及样式设置小技巧
一.盒模型元素分类常用的块状元素有: <div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl> ...
css 自动换行_前端必备！20个CSS小技巧
在日常学习和工作中,你是否经常觉得时间不够用?为了帮助你提高效率,今天,就为大家分享一些CSS小技巧,如果你感觉有用,也可以收藏与分享给你的小伙伴们~ 1. 文字水平居中将一段文字置于容器的水平中点 ...
日常开发CSS小技巧整理
日常开发CSS小技巧整理 1.解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移 .wrap {display: inline-block;overflow ...
12个你可能不知道的CSS小技巧
本文整理出12个开发中你有可能没有用到过的CSS小技巧,一起来看看吧~ 1. 自定义光标(cursor) 首先来看一下CSS的内置光标样式.平时开发中用到的基本上就是default.pointer.n ...
10 个不错的 CSS 小技巧
本文为译文,采用意译. CSS 大约有两百个属性.很多属性都是相互关联的,理清楚每一个属性细节是不可能的.所以,本文分享一些有用的 CSS 小技巧,方便开发者和设计师参考. 1. 打字效果 Typin ...
打印样式CSS的技巧和要点
不经过任何处理而直接打印网站上的页面会得到一个不理想的效果.我们WEB开发人员可以简单的采用几个要点来使之达到较为合适的效果: 使用响应式布局设置打印的效果打印背景图片和颜色,在合适的时候添加显示 ...
css文字换行时对不齐,css小技巧 - 换行对齐
假如需要你实现换行对齐,你可能会想到ul标签和li标签自带这种功能确实在使用li标签自带的项目符号的时候可以直接使用,但是有时可能会有不一致时就需要我们动手写两行代码来实现一下,比如这种效果: 项 ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...

file html5 样式,CSS小技巧之自定义个性的file表单样式

file html5 样式,CSS小技巧之自定义个性的file表单样式相关推荐

最新文章

热门文章