5個(gè)必須知道的css自定義代碼

1、占位符

在 <input> 標(biāo)簽中設(shè)置 placeholder 屬性時(shí)，有時(shí)候因?yàn)樾枨螅薷恼嘉环哪J(rèn)顏色或者字體大小，這是就可以用下面的css:

// firefox
input::-moz-placeholder {
 color: red;
 font-size: 18px;
 }
// IE
input:-ms-input-placeholder {
 color: red;
 font-size: 18px;
}
// chrome
input::-webkit-input-placeholder {
 color: red;
 font-size: 18px;
}

需要注意的是不同瀏覽器寫(xiě)法不同：

都要加上各自瀏覽器的前綴(如 -webkit- )；

firefox的 placeholder 的前面沒(méi)有 input- ；

firefox與chrome都是 :: 兩個(gè)冒號(hào)，而IE則是一個(gè) : ;

低版本的瀏覽器與新版本瀏覽器可能寫(xiě)法不同；

2、下拉框的小三角

select 標(biāo)簽會(huì)出現(xiàn)小三角,通常這個(gè)小三角我都會(huì)去掉，或者用背景圖片的方式替換為符合要求的樣子。去掉小三角的css：

-webkit-appearance: none; -moz-appearance: none;

在IE瀏覽器中目前還沒(méi)找到可以去掉小三角的方法。

3、input[type=number]右邊的spinners

nput[type=number] 通常用在移動(dòng)端設(shè)備上，瀏覽器會(huì)識(shí)別number輸入類(lèi)型，然后改變數(shù)字鍵盤(pán)來(lái)適應(yīng)它。但是它會(huì)出現(xiàn)spinners，一般不需要它。去掉spinners的css如下：

// firefox
input[type='number'] {
 -moz-appearance:textfield;
}
// chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 -webkit-appearance: none;
 margin: 0;
}

4、-webkit-tap-highlight-color

在移動(dòng)端瀏覽器上(如微信、QQ內(nèi)置瀏覽器)，當(dāng)你點(diǎn)擊一個(gè)鏈接或者通過(guò)Javascript定義的可點(diǎn)擊元素的時(shí)候，會(huì)出現(xiàn)藍(lán)色邊框，我是很討厭這個(gè)邊框的，所以一般我會(huì)去除：

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

將高亮色設(shè)為透明，這樣就看不到藍(lán)色邊框了。

5、滾動(dòng)條

webkit現(xiàn)在支持擁有overflow屬性的區(qū)域，列表框，下拉菜單，textarea的滾動(dòng)條自定義樣式。有時(shí)候需要把滾動(dòng)條去掉，特別是頁(yè)面中出現(xiàn)幾條滾動(dòng)條的時(shí)候：

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

設(shè)置滾動(dòng)條的寬度為0就可以去除滾動(dòng)條了。如果需要自定義滾動(dòng)條樣式可以點(diǎn)擊 www.xuanfengge.com/css3-webkit-scrollbar.html ，里面介紹了如何自定義滾動(dòng)條樣式。

上面記錄了我在項(xiàng)目中常用的比較不容易記憶的css代碼。如果朋友們也有比較常用的不太容易記住的css代碼，歡迎幫忙補(bǔ)充。

【相關(guān)推薦】

1. 免費(fèi)css在線(xiàn)視頻教程

2. css在線(xiàn)手冊(cè)

3. php.cn獨(dú)孤九賤（2）－css視頻教程

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com