html输入框style,更改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)。