zoukankan      html  css  js  c++  java
  • 【更改表单元素默认样式】更改文件上传按钮样式

    虽然我们无法直接更改表单的input[type=file]按钮,但是可以通过曲线救国的方式来实现。

    思路大致是这样的:

    1、将<input type='file' />按钮设置透明度为0

    2、在<input type='file' />上面覆盖一个button,使二者位置完全重合。

    HTML代码如下

    <span class="sl-custom-file">
        <input type="button" value="点击上传文件" class="btn-file"/>
        <input type="file" class="ui-input-file" />
    </span>

    CSS代码

    .sl-custom-file {
            position: relative;
            display: inline-block;
            zoom: 1;
            cursor: pointer;
            overflow: hidden;
            vertical-align: middle;
        }
     
    .btn-file{
            background-color: #E95C33 !important;
                color: #fff !important;
                border: 1px solid #E95C33 !important;
                width: 150px !important;
                border-radius: 0 !important;
    }    
    
    
    
    
        .sl-custom-file .ui-input-file {
            position: absolute;
            right: 0;
            top: 0;
            _zoom: 30;
            font-size: 300px 9;
            height: 100%;
            _height: auto;
            opacity: 0;
            filter: alpha(opacity=0);
            -ms-filter: "alpha(opacity=0)";
            cursor: pointer;
        }

     效果图如下:

  • 相关阅读:
    盘点杂谈(二)
    物料中库存的管理(一)
    物料中的库存管理(二)
    MM中的MRP(一)
    (转)成功ERP需实施顾问和项目经理亲密协作
    好久不来.
    MM中的MRP(三)
    MM中的MRP(二)
    深度学习浅层理解(一)
    处理流小结
  • 原文地址:https://www.cnblogs.com/superman66/p/4981448.html
Copyright © 2011-2022 走看看