表单元素美化之fils美化

最新推荐文章于 2024-09-16 06:30:00 发布

weixin_30724853

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量60

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/ylz-blog/p/4947013.html

版权

作为前端人员表单是经常会遇到这样的状况，设计给的效果图的表单做的很漂亮。但是基于表单的很多默认样式很多人肯定也是束手无策了。接下来我就给大家分享一下我的美化方法，其核心思想就一个你肯能一看就懂。（顺便加了几个你可能没用过的几个file属性，一起来看看吧！）

效果展示：

样式1：

/*j_filestyle1*/
.j_upload {
    padding: 4px 10px;
    height: 20px;
    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;
	display:block;
	margin:30px auto;
	text-align:center;
}

.j_upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
	text-align:center;
}

.j_upload:hover {
    color: #444;
	 background: #eee;
    border-color: #ccc;
    text-decoration: none
}

　　样式2：

/*j_filestyle2*/
.j_file {
	box-shadow:0px 6px 3px  #aaa;
    position: relative;
    display: inline-block;
    background:#398;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
	display:block;
	margin:30px auto;
	text-align:center;
}
.j_file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.j_file:hover {
	box-shadow:0px 6px #666;
    background:#396;
    text-decoration: none;
}

　html代码：

<form action="" method="post">
<h3>单张图片上上传</h3>
<span class="j_upload">
    <input type="file"  accept="image/jpeg,image/png,image/gif"  name="" >上传头像
</span>

<h3>单张图片指定格式上传（jpg，png,gif）</h3>
<span class="j_upload">
    <input type="file"  accept="image/jpeg,image/png,image/gif"   name="" >上传头像
</span>

<h3>多张图片指定格式上传（jpg，png,gif）</h3>
<span class="j_upload">
    <input type="file"  accept="image/jpeg,image/png,image/gif" multiple="multiple"  name="" >上传头像
</span>

<h3>多个word文件上传</h3>
<span  class="j_file">选择文件
    <input type="file" name="" accept="application/msword,"  multiple="multiple"  >
</span>
</form>

转载于:https://www.cnblogs.com/ylz-blog/p/4947013.html