当前位置:首页 > 教程中心 > DIV+CSS教程 > HTML5+CSS3

CSS3 input[type=file] 样式美化,input上传按钮美化

所属栏目:HTML5+CSS3 时间:2016-01-16 来源:网络 作者:不详 点击:


html自带的上传按钮非常丑,在HTML4+CSS2时,想要美化文件上传还是很麻烦了。

HTML5+CSS3后,就非常方便了,实例如下:

思路:

input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。

代码如下:

DOM结构:

<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">点击这里上传文件</a><a href="javascript:;" class="file">选择文件    <input type="file" name="" id=""></a>

CSS样式1:

/*a  upload */.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;
    *zoom: 1}.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer}.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none}

样式2:

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;}.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;}.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;}

样式一效果:

enter image description here

样式二效果:

enter image description here

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

共有 0 条评论

给个评价吧

验证码: