如何隱藏HTML <select>元素的下拉箭頭的邊框和背景顏色？

我發現在Mozilla home page的中心，有一個<選擇>元素（下拉列表），其箭頭沒有邊框和背景顏色。在facebook sign-up page上，下拉箭頭具有窗口標準邊框和背景色。我想知道是什麼使這種差異？我試圖在CSS中設置border到none，但它只隱藏整個<的邊框，選擇>元素，箭頭仍然有邊框。我在Windows上使用Firefox 4。如何隱藏HTML <select>元素的下拉箭頭的邊框和背景顏色？

查看附件截圖。上半部分顯示Facebook上的下拉列表，下半部分顯示Mozilla上的下拉列表。

enter image description here

來源

2011-06-05 powerboy

不知道如果我是愚蠢的，但我看不到你在說什麼。 – lonesomeday 2011-06-05 22:42:23

@lonesomeday其在通訊形式中的國家/地區字段 – 2011-06-05 22:45:46

當select元素的border css屬性未被覆蓋時，它會盡可能呈現爲原生（mozilla的情況）。另一方面，當指定border屬性時，瀏覽器會嘗試渲染select並留下邊框並犧牲它的某些本地外觀（Facebook的案例）。

或者，也許它會嘗試渲染沒有邊框的本地組合框，然後在其周圍繪製邊框。無論如何，當指定邊框時，組合框需要以不同的方式以窗口方式或瀏覽器方式繪製。

，僅供參考，我得在Win7經典主題和Mozilla的select按鈕看起來像任何其他傳統的Windows按鈕：灰色和3D：

select elemnt on mozilla site with the classic windows theme

來源

2011-06-05 23:15:27 Gman

發現了兩件事：1.在CSS中放置'border：none'實際上使邊界箭頭成爲箭頭。 2.箭頭不具風格。 – powerboy 2011-06-05 23:26:15

是的，我也發現一旦組合不是原生的（箭頭按鈕不透明），你不能再用css覆蓋原生它。 – Gman 2011-06-05 23:43:17

你看到的沒有一個選擇，但類型圖像的另一個輸入欄的旁邊，輸入字段。圖像輸入用作表單的提交按鈕。他們的html如下：

<input id="q" type="search" placeholder="Search" name="q"> 
<input id="quick-search-btn" type="image" alt="Search" src="/images/template/search-submit.png">

順便說一句，如果你運行的是firefox，我會建議讓firebug add-on。然後你可以右鍵點擊任何元素並檢查它。

來源

2011-06-05 22:52:05

我正在討論Mozilla.org中心的下拉列表，而不是搜索框。我編輯了這個問題，使其更加清晰。對困惑感到抱歉。 – powerboy 2011-06-05 23:02:43

如何隱藏HTML <select>元素的下拉箭頭的邊框和背景顏色？

回答

相關問題