翻譯自這篇文章，也許不是翻譯hhh
這篇文章的目的講解應(yīng)用css更改input標(biāo)簽
example
假設(shè)一個(gè)場(chǎng)景——設(shè)計(jì)師給你一份webapp原型圖，然后你看見他設(shè)計(jì)了一個(gè)選擇下拉框（select drop-down input（就是select標(biāo)簽））和瀏覽器的默認(rèn)樣式不一樣。你說，沒門，沒人知道這幾乎不可能么？（雖然不是真的）
也許對(duì)你說更改默認(rèn)樣式是有那么一點(diǎn)困難，但是其實(shí)很簡(jiǎn)單~
這篇文章基于網(wǎng)上早已發(fā)表的文章，并且在chrome內(nèi)核和firefox內(nèi)核都可以使用，而我只是把它們整合起來而已。（做了一點(diǎn)微小的工作）
chrome內(nèi)核的可以看這篇文章Chris Coyier from CSS-tricks.com
firefox內(nèi)核可以看這篇文章stackoverflow
開始噠
如果我們需要做一個(gè)這樣的下拉框：
example drop-down pic
Firefox默認(rèn)樣式：
firefox default styling
chrome默認(rèn)樣式：
chrome default styling
首先用css除去border和默認(rèn)樣式（select標(biāo)簽有個(gè)dropdown的class）：
.dropdown select {
border: 0 !important;. /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
}
上述代碼在firefox效果圖：
firefox erase default style
在chrome中：
chrome erase default style
Safari：
Safari erase default style
so easy,Mom will never worry about my study!
但我們?nèi)耘f需要增加一些細(xì)節(jié)，增加一個(gè)藍(lán)色的箭頭然后作為一個(gè)背景圖加進(jìn)去：
.dropdown select {
border: 0 !important;. /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url('you_own_image_arrow.png') no-repeat;
}
會(huì)得到這樣的效果：
使用background-position更改背景圖片的位置使得其在select標(biāo)簽的右邊中間就行
像這樣：
.dropdown select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: url('dropdown_arrow.png') no-repeat; /*Adds background-image*/
background-position: 82px 7px; /*Position of the background-image*/
width: 100px; /*Width of select dropdown to give space for arrow image*/
}
chrome和safari中的效果：
firefox:
火狐上的樣式和我們所期望的不一樣～
原因是因?yàn)槲覀兊募^哦背景在火狐的默認(rèn)箭頭之下，就如同z-index小于默認(rèn)的一樣
于是我們需要加入如下代碼：
text-indent: 0.01px;
text-overflow: "";
整個(gè)dropdown的樣式代碼會(huì)是這樣：
.dropdown select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: url('dropdown_arrow.png') no-repeat; /*Adds background-image*/
background-position: 82px 7px; /*Position of the background-image*/
width: 100px; / *Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/
}
火狐中效果如圖：
很贊吧～但是在IE上依舊有問題～（如果你知道有什么方法讓它在ie上工作，請(qǐng)務(wù)必告訴我）
最后匯總一番：
HTML：
<div class="dropdown">
<p>Show: </p>
<select>
<option> 18 per page</option>
<option> 10 per page</option>
<option> 5 per page</option>
</select>
</div>
<!-- DropDown -->
CSS:
.dropdown p {
display: inline-block;
font-weight: bold;
}
.dropdown select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: url('dropdown_arrow.png') no-repeat; /*Adds background-image*/
background-position: 82px 7px; /*Position of the background-image*/
width: 100px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/
}
如何讓其在IE上顯示呢？有人已經(jīng)給出了做法：
select::-ms-expand { display: none; }
還會(huì)繼續(xù)翻譯一些不錯(cuò)的文章，雖然會(huì)有點(diǎn)菜～但是挺開心的～有什么問題可以心平氣和的指出來～這是第一篇正式用markdown寫的，所以會(huì)顯得有點(diǎn)啰嗦（其實(shí)原作者也挺啰嗦的hhh）。
