常用瀏覽器私有屬性小技巧

2018-06-19 16:31 更新
  • 更改輸入框文字placeholder顏色

::-webkit-input-placeholder { color: orange; } ::-moz-input-placeholder { color:orange; } ::-ms-input-placeholder { color: orange; } ::input-placeholder { color: orange; }

  • 禁用選擇文本

* { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

使用情況

/* 避免了非輸入類的user-select */ *:not(input):not(textarea) { -webkit-user-select: none; -webkit-touch-callout: none; }



  • 更改選中默認(rèn)顏色

::-webkit-selection { background: #d3d3d3; color: #555; } ::-moz-selection { background: #d3d3d3; color: #555; } ::selection { background: #d3d3d3; color: #555; }


  • 美化或隱藏滾動條
類似今日頭條移動端的頭部tab滑動越來越多了,我們除了使用iscroll等插件外,我們還可以使用overflow-x:auto,但是都會看到滾動條,特別影響美觀,不過,我們現(xiàn)在可以保留滾動,又可以隱藏滾動條

::-webkit-scrollbar { //滾動條寬度 width:0;

/* or */

display:none; } ::-webkit-scrollbar-thumb { //滑軌上滑塊 background-color: #e78170 !important; }

::-webkit-scrollbar-button { //滑軌兩頭的監(jiān)聽按鈕顏色 background-color: #e78170; }

如果你要隱藏某個div的滾動條,你可以這樣:

div::-webkit-scrollbar { width:0; /* or */ display:none; }


  • 阻止input出現(xiàn)黃色背景
在chrome瀏覽器中,當(dāng)我們點擊了保存密碼后,再次進入頁面時,表單會出現(xiàn)黃色背景,會影響整體美觀,我們可以加上下面的代碼,阻止input出現(xiàn)黃色背景

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


  • 清除input[type="number"]側(cè)邊的箭頭

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }


  • iOS 禁止或顯示系統(tǒng)默認(rèn)菜單

當(dāng)你觸摸并按住觸摸目標(biāo)時候,禁止或顯示系統(tǒng)默認(rèn)菜單。在iOS上,當(dāng)你觸摸并按住觸摸的目標(biāo),比如一個鏈接,Safari瀏覽器將顯示鏈接有關(guān)的系統(tǒng)默認(rèn)菜單。這個屬性可以讓你禁用系統(tǒng)默認(rèn)菜單。

一般用在img和a上

img, a { -webkit-touch-callout: none; }


  • 去除點擊鏈接或者JavaScript可點元素時的高亮效果

a { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* 考慮到兼容問題,所以寫兩個上去,針對Android的 */ }


  • 彈性滾動

-webkit-overflow-scrolling: touch;

允許獨立的滾動區(qū)域和觸摸回彈,主要兼容webkit內(nèi)核的瀏覽器




以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號