首页 > 代码库 > 给上传文件的input控件"美容"

给上传文件的input控件"美容"

2024-09-19 03:40:36   205人阅读

作为一名前端程序猿呢，在工作中经常会遇到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}

　　结果

技术分享

给上传文件的input控件"美容"


联系
我们