我們寫css的時候經(jīng)常會遇到要清楚一些默認(rèn)的樣式,其實(shí)每次做項目中需要清除的樣式就經(jīng)常是那么幾個,最常見的比如

• 清除表單元素input,select,``textarea`的默認(rèn)樣式,
• CSS3中隱藏滾動條但仍能繼續(xù)滾動,
• 多行文本溢出省略號顯示等等,

所以就總結(jié)了一下,持續(xù)更新中...,也請大家多多貢獻(xiàn)更多的常見的需要清除默認(rèn)樣式的方法??

1.多行文本溢出省略號顯示

• 讓文本只顯示一行，然后溢出省略號顯示

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

• 讓文本顯示兩行，然后溢出部分省略號顯示

    line-height: 1.3rem;
    max-height: 2.6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-all;
     overflow: hidden;

2.滾動條的處理

CSS3中隱藏滾動條但仍能繼續(xù)滾動

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

清除瀏覽器默認(rèn)的滾動條

::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner {
    display: none;
}

::-webkit-scrollbarMDN

3. 解決iPhone中overflow:scroll;滑動速度慢或者卡的問題

-webkit-overflow-scrolling : touch;

4. 消除input,textarea等的默認(rèn)樣式

input, button, select, textarea {
    outline: none;
    -webkit-appearance: none;
    border-radius: 0;
    border:0;
}
textarea{
    resize:none;
}

• outline: none;去掉chrome瀏覽器自帶的點(diǎn)擊input框出現(xiàn)邊框情況
• -webkit-appearance: button;使元素標(biāo)簽看起來像個按鈕樣式,意思定義了按鈕樣式
  -webkit-appearance: none;去掉按鈕樣式
• border-radius: 0; 去掉圓角
  border:0; 去掉border
• textarea{resize:none}取消chrome下textarea可拖動放大：

Chrome瀏覽器下自動填充的輸入框背景會變成黃色，可以用下面CSS聲明修成白色

input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px #fff; 
    box-shadow:inset 0 0 0 1000px #fff;
    background-color: transparent; 
} 

修改placeholder的顏色(樣式)

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #A0A0A0;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #A0A0A0;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #A0A0A0;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #A0A0A0;
}

網(wǎng)站置灰

body::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 999;
    mix-blend-mode: color;
    pointer-events: none;
}
// 或者使用css3的 filter 屬性
body {
    filter: grayscale(1);
}

About

github
blog