自定義選擇不跨瀏覽器的適當

Question

，所以我想自定義選擇框，我做了以下內容：

HTML：

<div class="select"> 
    <select name="Step_01_Roof_Width" onChange="GetWidth();" class="Step_01_SelectBox" id="Step_01_Select_Width"> 
</div> 

CSS：

.select select 
{ 
    width:    300px; 
    background:   transparent; 
    padding:   5px; 
    font-size:   10px; 
    line-height:  1; 
    border:    0; 
    border-radius:  0; 
    height:    19px; 
    -webkit-appearance: none; 
} 

.select 
{ 
    width:    270px; 
    height:    19px; 
    border-radius:  15px; 
    border:    black solid 1px; 
    background:   url(/wp-content/themes/blackbird/phpwizard/HTML5Application/public_html/images/Step_01/selectarrow.png) no-repeat right white ; 
} 

然而，這隻能據我所知，Chrome和Safari瀏覽器給Firefox帶來了一些問題。你可以在這裏查看：http://www.solar-discounter.nl/uw-pv-systeem/如果任何人有任何關於如何在Firefox和IE瀏覽器上實現Chrome瀏覽器和Safari瀏覽器的想法，那對我來說會是一個很大的幫助！ 感謝您的閱讀。

Answer 1

我認爲這是你在找什麼：How to remove the arrow from a select element in Firefox

添加opacity:0;到.select select並與之前的選擇絕對位置的股利。 然後你可以用javascript/jquery更新div文本。