个人博客
专注IT梦想的地方

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

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

 

 

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

 

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <style media="screen">
        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);}
        </style>
    </head>
    <body>
        <div class="md_f">
            <form class="md_fs" action="index.html" method="post">
                <label for="files" class="files">上传文件</label>
                <input type="file" name="files" id="files"><br/>
            </form>
        </div>
    </body>
</html>

DEMO地址:https://www.asni.cn/demo/demo4/index.html

赞(1) 打赏
未经允许,不得转载本站任何文章:智言个人博客 » CSS小技巧之自定义个性的file表单样式

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏