1

所以我想要一个自定义选择框，我做了以下事情：

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 和 IE 对此有一些问题。您可以在此处查看：http: //www.solar-discounter.nl/uw-pv-systeem/如果有人对如何在 Firefox 和 IE 上实现 chrome 和 safari 示例有任何想法，那将是一个很大的帮助对我来说！谢谢阅读。

4

1 回答 1

1

我认为这就是您要查找的内容：如何从 Firefox 中的选择元素中删除箭头

在选择之前添加opacity:0;到绝对位置的 div。.select select然后，您可以使用 javascript/jquery 更新 div 文本。

于 2013-05-15T08:35:46.233 回答