关于select的样式

1.select的高度

select这类标签是最让人头疼的 因为IE是作为窗口控件 padding margin什么的 都不会生效 只能用在FF下

这时候 设置高度后你会发现 line-height是不生效的~ 所以要采用height+padding-bottom来实现文字居中

2.select下拉的模拟

一个选择框的某些部分我们是可以美化的，比如字体、边框、颜色、内边距和背景颜色：
但是烦人的下拉箭头还是保持不变。没有直接美化它的方式，但解决方案还是非常简单的，首先我们需要用一个div容器包裹在select元素外围：
HTML code：

<select> 
<option>Here is the first option</option> 
<option>The second option</option> 
</select>

下一步我们需要加入一些css，以确保选择框元素被以某种方式美化：

CSS code:

.styled-select select { 
background: transparent; 
width: 268px; 
padding: 5px; 
font-size: 16px; 
border: 1px solid #ccc; 
height: 34px; 
-webkit-appearance: none; /*for chrome*/ 
} 

我们需要确保选择框的跨度比外围的div容器更宽，这样默认的下拉箭头就会消失

下面是我们要用的新下拉箭头：
我们的div容器需要被美化成新的下拉箭头出现在我们预想的位置：

复制代码代码如下:

.styled-select { 
width: 240px; 
height: 34px; 
overflow: hidden; 
background: url(new_arrow.png) no-repeat right #ddd; 
} 

当然 我们也可以 用css来模拟小三角 ，只是需要增加一些结构~

PS:上面对选择框的模拟的原理可以同样的应用在input等让人烦恼的控件模拟中~