美文网首页
input file(修改样式)

input file(修改样式)

作者: yiqian091 | 来源:发表于2019-01-02 10:51 被阅读0次

html:
<a href="javascript:;" class="a-upload">

        <input type="file" name="" id="">点击这里上传文件

</a>

css:

.a-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;

            text-decoration: none;

            *zoom: 1

        }

        .a-upload  input {

            position: absolute;

            font-size: 100px;

            right: 0;

            top: 0;

            opacity: 0;

            filter: alpha(opacity=0);

            cursor: pointer;

            color: #444;

            background: #eee;

            border-color: #ccc;

            text-decoration: none

        }

        .a-upload:hover {

            color: #ffffff;

            background: #ff6f29;

            border-color: #ff6f29;

            text-decoration: none

        }

效果:        

总结:

input[type="file"]外面套盒子 设置overflow:hidden,input本身设置大小让其占满父盒子,设置opacity:0;

最后样式调整父盒子样式

相关文章

网友评论

      本文标题:input file(修改样式)

      本文链接:https://www.haomeiwen.com/subject/rvialqtx.html