select相关问题

Posted 2020-10-10 夜冷霜星

1.设置option文字居中时发现，给select设置text-align:center在火狐浏览器下ok，但是在chrome浏览器无效，然后option在两个浏览器下设置text-align:center都是无效

解决方案：

select:{ width: auto; padding: 0 1%; margin: 0; }

option{ text-align:center;}

*必须设置select的padding

*不用设置select的宽（width），auto就可以了。

2.文本居右

*第一种，用padding挤（固定布局）

*第二种 

<select dir="rtl">

    <option>Foo</option>    

    <option>bar</option>

    <option>to the right</option>

</select>

<style>

select {  direction: rtl; }

</style>

3.小图标问题

select {
　　appearance:none;
　　-moz-appearance:none;
　　-webkit-appearance:none;
　　background: url("../img/arrow.png") no-repeat scroll right center transparent;
　　padding-right: 10px;
}