美文网首页
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