使用過原生select做網頁開發的人，一定會對select的兩個問題痛心疾首，一是箭頭沒辦法使用css改造，二是顯示文字沒辦法左右居中。

首先，如果你有足夠時間的話，請改用jquerymobile。jquerymobile提供了移動端非常強大的各種控件。對select除了基本css改造外，還支持選項的分組、多選等各種樣式。

其次，使用div模擬，網上有較多的使用div+css模擬select的案例，可以找來參考。

最后，如果你對前端開發不熟，而且又想偷懶的話，可以采用本文中的土鱉方法。

改造箭頭

博主在開發微信上的H5應用時 ，發現border:none和background:none在微信瀏覽器里面是無效的。在網上找到一個辦法，直接清除了select的樣式：

appearance:none;

-moz-appearance:none; /* Firefox */

-webkit-appearance:none; /* Safari 和 Chrome */

apperance屬性可以改觀元素的外觀，加上這段css后，select元素就沒有了邊框、箭頭和背景。appearance屬性還可以使用元素顯示出別的控件樣式，例如button或者listbox。 接下來使用自定義的箭頭放到select之上就可以了，可以將箭頭蓋在select之上，麻煩的是要考慮布局和事件的問題。

如果對箭頭的要求比較不高，可以使用標簽，本來是用于給文字加粗的，但如果文字是空的話，其border屬性可以模擬一個箭頭效果出來。

select {

width: 60%;

height: 40px;

background-color: rgb(246, 171, 138);

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;

}

b {

border-color: #FFF rgb(246, 171, 138) rgb(246, 171, 138);

border-style: solid;

border-width: 4px;

position: absolute;

top: 36px;

margin-left: -22px;

}

參見上述css，標簽的border屬性，只有最上方設置成白色，其他三個方向上的顏色和select背景一樣，這樣，就可以呈現出來。另外，這種辦法因為是對文本的修飾，所以并不會影響select屬性的點擊事件。效果如下圖：

文字左右居中

select標簽的另外一大難題就是文字的左右居中問題，text-align:center不起作用。幸運的是，有一個屬性對select還是有效的，這就讓我們操作文字居中有了可能。這個屬性就是text-indent，文字縮進。

只要通過js計算出select的寬度和文字的寬度，得到縮進距離，就能實現文字居中了。

select的寬度很好計算，關鍵是文字的寬度怎么辦呢？div是不能測量文字長度的，剛好就可以，所以很簡單，在頁面某個位置放一個display:none的span標簽，文字屬性設置和select文字屬性完全一樣，塞上一兩個漢字，專門用來測量文字寬度。

博主就是通過這樣的土鱉辦法來解決的。在實際操作中，發現測量出來的文字寬度和select下用到文字寬度有一丟丟差異，肉眼觀察還是能覺察到的。估計是和select字體沒能設置到完成相同，搞不清楚原因在哪。博主直接將測試的文字寬度乘以一個系數(例如1.1)，調整到差不多一致。

前端路長，坑多，還是要多下功夫！

總結

以上是生活随笔為你收集整理的html select 文字居中显示图片,html原生select改造箭头及文字左右居中的一种办法...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。