經常使用的不易記憶的css自定義代碼

在製做頁面時，常常會遇到須要自定義一些標籤的默認行爲(如：input的佔位符等)，但這些默認的設置的css通常比較難記住,因此有必要本身作一下記錄。下面是我常常用到的一些重設默認行爲的css。

一、佔位符

在<input>標籤中設置placeholder屬性時，有時候由於需求，要修改佔位符的默認顏色或者字體大小，這是就能夠用下面的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;
}

須要注意的是不一樣瀏覽器寫法不一樣：

1. 都要加上各自瀏覽器的前綴(如-webkit-)；
2. firefox的placeholder的前面沒有input-；
3. firefox與chrome都是::兩個冒號，而IE則是一個:;
4. 低版本的瀏覽器與新版本瀏覽器可能寫法不一樣；

二、下拉框的小三角

select標籤會出現小三角,一般這個小三角我都會去掉，或者用背景圖片的方式替換爲符合要求的樣子。去掉小三角的css：

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

在IE瀏覽器中目前還沒找到能夠去掉小三角的方法。

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

nput[type=number]一般用在移動端設備上，瀏覽器會識別number輸入類型，而後改變數字鍵盤來適應它。可是它會出現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;
}

四、-webkit-tap-highlight-color

在移動端瀏覽器上(如微信、QQ內置瀏覽器)，當你點擊一個連接或者經過Javascript定義的可點擊元素的時候，會出現藍色邊框，我是很討厭這個邊框的，因此通常我會去除：

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

將高亮色設爲透明，這樣就看不到藍色邊框了。

五、滾動條

webkit如今支持擁有overflow屬性的區域，列表框，下拉菜單，textarea的滾動條自定義樣式。有時候須要把滾動條去掉，特別是頁面中出現幾條滾動條的時候：

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

設置滾動條的寬度爲0就能夠去除滾動條了。若是須要自定義滾動條樣式能夠點擊http://www.xuanfengge.com/css3-webkit-scrollbar.html，裏面介紹瞭如何自定義滾動條樣式。

上面記錄了我在項目中經常使用的比較不容易記憶的css代碼。若是朋友們也有比較經常使用的不太容易記住的css代碼，歡迎幫忙補充。