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;
        }

     效果图如下:

  • 相关阅读:
    字符串练习
    Python基础
    熟悉常见的Linux命令
    大数据概述
    实验三 递归下降分析法
    简化C语言文法
    实验一 词法分析程序实验
    词法分析程序
    制作首页的显示列表
    完成登录功能
  • 原文地址:https://www.cnblogs.com/superman66/p/4981448.html
Copyright © 2011-2022 走看看