在Chrome和Safari中刪除下拉菜單中的背景樣式？

是否可以在Chrome和Safari中使表單中的下拉菜單的背景和邊框透明？我們在Firefox和IE瀏覽器中看起來很完美，但Chrome和Safari似乎熱衷於使用他們自己的默認風格。 :(在Chrome和Safari中刪除下拉菜單中的背景樣式？

這是我們正在使用的代碼，第一個div的背景網址是運用自己的自定義下拉箭頭：

<div style="margin-top:-15px;background: url(images/select-arrow.gif) no-repeat right; overflow: hidden; font-family:SwankyandMooMoo; color:#565da4; width:352px;">  
<select name="for" id="for" style="background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;"> 
<option value="ads" style=" background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">Ads</option> 
<option value="other" style=" background: none; border:none; width:376px;font-family:SwankyandMooMoo; color:#565da4; font-size:26px;">Other</option> 
</select> 
</div>

來源

2012-10-12 Paul

好，沒有看到就很難判斷任何代碼你的答案：「修復」可能是使用一個100％不透明的.png圖像作爲輸入的背景，這應該適用於所有現代瀏覽器。 border: 0;，因爲這是正確的語法來實現你想要的。

此外，自定義字體不應該真正影響任何東西。我一直都在使用它們。最後，我們目前的HTML和CSS標準甚至不可能實現。這是另一個與你有關的stackoverflow問題。

How to style a <select> dropdown with CSS only without JavaScript?

來源

2012-10-12 18:05:37 AJStacy

巴布亞新幾內亞招似乎並不奏效，我已經更新了我原來的職位，所以你可以看到，我們正在使用的代碼。這有點獨特，因爲我們使用自定義字體，並使用主div背景圖像來覆蓋默認的下拉箭頭。 – Paul

閱讀我上面的編輯。 – AJStacy

編輯現在的問題是在這裏澄清的一個的jsfiddle會做你想要什麼。

您在選擇設置背景圖片，並使用包裝div來掩蓋真正的下拉箭頭。

HTML

<div class="dropdown-wrapper"> 
    <select class="dropdown"> 
     <option>Test 123</option> 
     <option>Test 123</option> 
     <option>Test 123</option> 
     <option>Test 123</option> 
    </select> 
</div>

CSS

.dropdown-wrapper { 
    position: relative; 
    overflow: hidden; 
    width: 152px; /* width minus 24 */ 
} 
.dropdown { 
    font-size: 24px; 
    border: none; 
    width: 176px; 
    background: url('http://whatsnew.googleapps.com/_/rsrc/1299892144226/choose-release-track/arrow_down_blue24.png') no-repeat; 
    background-position: 128px 0px; /* width minus 48 */ 
}

來源

2012-10-12 18:10:53

你是說將繼承背景應用到select元素？試過了，它似乎也沒有工作。請參閱我的原始文章，因爲我已經使用我們正在使用的代碼進行了更新。 – Paul

@Paul - 我剛纔發佈的作品是chrome，ff和ie8。在包裝DIV而不是SELECT本身上設置背景圖像可能會導致Chrome和Safari渲染出現問題。 –

感謝您的快速回復和代碼，但這似乎也沒有工作。在檢查http://jsfiddle.net/wnGs8/30/時，您可以在Chrome和Safari中看到在Result下面仍有一個灰色漸變用作背景。 – Paul

在Chrome和Safari中刪除下拉菜單中的背景樣式？

回答

相關問題