翻译自这篇文章，也许不是翻译hhh
这篇文章的目的讲解应用css更改input标签
example
假设一个场景——设计师给你一份webapp原型图，然后你看见他设计了一个选择下拉框（select drop-down input（就是select标签））和浏览器的默认样式不一样。你说，没门，没人知道这几乎不可能么？（虽然不是真的）
也许对你说更改默认样式是有那么一点困难，但是其实很简单~
这篇文章基于网上早已发表的文章，并且在chrome内核和firefox内核都可以使用，而我只是把它们整合起来而已。（做了一点微小的工作）
chrome内核的可以看这篇文章Chris Coyier from CSS-tricks.com
firefox内核可以看这篇文章stackoverflow
开始哒
如果我们需要做一个这样的下拉框：
example drop-down pic
Firefox默认样式：
firefox default styling
chrome默认样式：
chrome default styling
首先用css除去border和默认样式（select标签有个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!
但我们仍旧需要增加一些细节，增加一个蓝色的箭头然后作为一个背景图加进去：
.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;
}
会得到这样的效果：
使用background-position更改背景图片的位置使得其在select标签的右边中间就行
像这样：
.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:
火狐上的样式和我们所期望的不一样～
原因是因为我们的箭头哦背景在火狐的默认箭头之下，就如同z-index小于默认的一样
于是我们需要加入如下代码：
text-indent: 0.01px;
text-overflow: "";
整个dropdown的样式代码会是这样：
.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上工作，请务必告诉我）
最后汇总一番：
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上显示呢？有人已经给出了做法：
select::-ms-expand { display: none; }
还会继续翻译一些不错的文章，虽然会有点菜～但是挺开心的～有什么问题可以心平气和的指出来～这是第一篇正式用markdown写的，所以会显得有点啰嗦（其实原作者也挺啰嗦的hhh）。
