如何從Firefox中的SELECT元素中刪除箭頭我在試著select元素使用CSS 3。我在WebKit(Chrome/Safari)上得到了我想要的結果，但是Firefox玩得不太好(我甚至不想使用IE)。我在用CSS 3appearance屬性，但由于某些原因，我無法擺脫Firefox的下拉圖標。下面是我正在做的事情的一個例子：http://jsbin.com/aniyu4/2/edit#dropdown {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent url('example.png') no-repeat right center;
padding: 2px 30px 2px 2px;
border: none;}如你所見，我不是想要什么花哨的東西。我只想刪除默認樣式，并添加自己的下拉箭頭。就像我說的，WebKit很棒，F(xiàn)irefox不太好。顯然，-moz-appearance: none不能擺脫掉下來的東西。有什么想法嗎？不，JavaScript不是選項
3 回答
子衿沉夜
TA貢獻1828條經驗 獲得超3個贊
<select class='css-select'> <option value='1'> First option </option> <option value='2'> Second option </option></select>
.css-select {
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;}<span class='css-select-moz'> <select class='css-select'> <option value='1'> First option </option> <option value='2'> Second option </option> </select> </span>
.css-select {
-moz-appearance:window;
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;}@-moz-document url-prefix() {.css-select-moz{
background-image: url('images/select_arrow.gif');
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}}添加回答
舉報
0/150
提交
取消