美文网首页
css默认样式处理

css默认样式处理

作者: 暖年的咆哮 | 来源:发表于2019-10-29 14:38 被阅读0次

    浏览器双击选中文字

    body{
        -moz-user-select:none;/*火狐*/
        -webkit-user-select:none;/*webkit浏览器*/
        -ms-user-select:none;/*IE10*/
        -khtml-user-select:none;/*早期浏览器*/
        user-select:none;
    }
    

    a标签默认样式

    a,a:link,a:visited,a:hover,a:active{
        text-decoration: none;
        color:inherit;
    }
    

    input默认样式

    input{
          background:none;  
          outline:none;  
          border:none;
    }
    /*获得焦点之后取掉默认的蓝色选中框*/
    input:focus{   
          border-radius: 5px;
          border: 1px solid #ccc;
    }
    

    默认checkbox样式修改

    /*html部分:*/
    <div class="remPwd">
          <input type="checkbox" id="checkboxLogin" />
          <label for="checkboxLogin">记住密码</label>
    </div>
    
    /*css部分:*/
    .remPwd input[type=checkbox] + label::before {
          content: "\a0";  /* 不换行空格 */
          display: inline-b
          vertical-align: 2px;
          width: 14px;
          height: 14px;
          margin-right: 5px;
          border-radius: 3px;
          border:1px solid #68c6db;
          cursor: pointer;
          text-indent: 2px;
          line-height: .65;  /* 行高不加单位,子元素将继承数字乘以自身字体尺寸而非父元素行高 */
     }
    .remPwd input[type="checkbox"]:checked + label::before {
         ontent: "\2713"; /* 对号的 Unicode 编码 */
         color: #68c6db; /* 选中的背景颜色 */
         cursor: pointer;
     }
    .remPwd input[type='checkbox'] {
            /* 隐藏掉原先实际的 checkbox 框,之所以没用 display:none; 这种简单直接的方式,
           是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除 */
           position: absolute;
           clip:rect(0,0,0,0);       /* 隐藏方式一:裁剪为0 */
           /* visibility: hidden; */ /* 隐藏方式二:隐藏属性 */
    }
    
    

    button的disabled样式

    button{
        margin-left: 10px;
        border-radius: 5px;
        height: 28px;
        background-color: #0e85e6;
        color: #fff;
        border: 1px solid #0e85e6;
        text-shadow: none;
        box-shadow: none;
    }
    button[disabled] {
        background: #89caff;
        border-color:#89caff;
    }
    

    Continue...

    相关文章

      网友评论

          本文标题:css默认样式处理

          本文链接:https://www.haomeiwen.com/subject/vwzwvctx.html