更改input输入框的样式

翻译自这篇文章，也许不是翻译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：

 
Show: 
 
  18 per page
  10 per page
  5 per page
 
 

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）。