zoukankan      html  css  js  c++  java
  • 设置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

  • 相关阅读:
    shentou mianshiti
    PHP
    XSS分类&危害&防御
    SQL注入原理&分类&危害&防御
    绕WAF&安全狗新姿势
    IO 模型
    SPC 判异
    [VBA]关于查找方法(Find方法)的应用(一)
    python学习第二十三天 并发编程(线程,进程,协程)
    excel 空单元格在图表中显示的方式 空 0 或者线
  • 原文地址:https://www.cnblogs.com/rachelch/p/7514959.html
Copyright © 2011-2022 走看看