css小技巧

1 . 设置input里placeholder的字体颜色 属性

input::input-placeholder{color:#1b9dc7;}

input::-webkit-input-placeholder{color:#1b9dc7;}

input::-o-input-placeholder{color:#1b9dc7;}     

input::-ms-input-placeholder{color:#1b9dc7;}

input::-moz-input-placeholder{color:#1b9dc7;} 

2. 图片无法正常加载时 用默认图片替代的功能

<img src="img/1.jpg"  onerror="javascript:this.src='img/default.png';" >  

3. 穿透上层元素给下层元素添加事件

.pointer{
　　　　　　pointer-events:none;
　　    }

4. 设置元素透明背景：

input{
    background:transparent
}

5. 设置浏览器自动计算元素宽度属性(calc)

.div{
    width: calc(100% - 200px);   
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
}

6. 单行文本超出宽度显示省略号CSS代码

div{
    overflow: hidden;   
    width: 120px;  
    text-overflow: ellipsis;    
    white-space: nowrap;  
}

7. 设置你的彩色照片显示黑白照片

img{
         filter: grayscale(100%);
        webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
}

8. 自定义滚动条css样式

  1、::-webkit-scrollbar   滚动条整体样式；
  2、::-webkit-scrollbar-thumb  滑块部分；
  3、::-webkit-scrollbar-thumb  轨道部分;

    /*滚动条整体样式*/
    .box::-webkit-scrollbar {
        width: 10px;
        height: 1px;
    }

    /*滚动条滑块*/
    .box::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: #535353;
    }

    /*滚动条轨道*/
    .box::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
        border-radius: 10px;
        background: #ccc;
    }

9. 使用CSS生成一个三角形

<div class="triangle"></div>

.triangle { 
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

10. 禁止用户选中文本(user-select)

div {
     user-select: none; 
     -webkit-user-select: none;
    -moz-user-select: none;
}

11. 禁止右键菜单相关操作

document.oncontextmenu = function() { //禁用右键菜单
   event.returnValue = false;
}

document.onselectstart = function() { //禁用网页上选取的内容
    event.returnValue = false;
}
document.oncopy = function() { //禁止拷贝文件
   event.returnValue = false;
}

document.onkeydown = function() { //禁用键盘中的ctrl、alt、shift
    if(event.ctrlKey) {
       return false;
    }
  if(event.altKey) {
     return false;
  }

   if(event.shiftKey) {
      return false;
   }
}

12. 移除select默认样式

 select{
       outline: none;
       border: 0;   //去除边框
       appearance: none;  //去除下拉箭头
      -moz-appearance: none;
      -webkit-appearance: none;
 }

13. 禁止button选中和点击

 button{
        pointer-events: none;
        cursor: not-allowed;
        box-shadow: none;
        opacity: .65;
        background: #e4e4e4;
        color:#0b0b0b;
        cursor: not-allowed;
}