• 设置input的样式


    css中的 ” 七层重叠法 ” :即网页内容先后顺序分别为:背景边框,负值z-index,display:block,浮动,display:inline-block,z-index:auto,正值z-index,越往后在网页中的层级越靠前,也就是说如果一个z-index值为1或者更高的话,它就会遮挡掉他之前的所有元素。

    利用这个法则以及opacity设置透明度,可以模拟一个样式:

    <style>
    *{
      margin:0;
      padding:0;
    }
    .uploadbox{
      150px;
      height:150px;
      margin:100px;
      position:relative;
    }
    .uploadbox input{
      cursor:pointer;
      100%;
      height:100%;
      position:absolute;
      left:0;
      top:0;
      z-index:2;
      opacity:0;
      filter: alpha(opacity=0);
    }
    .uploadbox-bg{
      position:absolute;
      100%;
      height:100%;
      border:1px solid #cccccc;
      background:#dfdfdf;
      z-index:1;
    }
    .uploadbox-bg p,.uploadbox-bg span{
      text-align:center;
    }
    .uploadbox-bg p{
      font-size:80px;
      color:#999999;
    }
    .uploadbox-bg span{
      display:block;
      font-size:14px;
      color:#666666;
    }
    .uploadbox:hover .uploadbox-bg p,.uploadbox:hover .uploadbox-bg span{
      color:blue;
    }
    </style>
    
    <div class="uploadbox">
      <input type="file" id="uploadbox" value="上传" />
      <div class="uploadbox-bg">
        <p>+</p>
        <span>点击上传</span>
      </div>
    </div>

    参考文章:http://www.cnblogs.com/ztfjs/p/select.html

    注意:文章里面关于select设置样式的方法不兼容ie

  • 相关阅读:
    jmeter上做分布压测
    jpg,jpeg,bmp,png,gif图片格式区别
    jmeter的命令行进行压力测试
    Java8新特性
    02-Git
    01-Maven
    Java-集合
    Java-I/O框架
    mongodb安装配置
    Nginx常见错误及处理方法
  • 原文地址:https://www.cnblogs.com/rachelch/p/7514959.html
Copyright © 2020-2023  润新知