1

是否可以在 Chrome 和 Safari 中以透明的形式使下拉菜单的背景和边框？我们让它在 Firefox 和 IE 中看起来很完美，但 Chrome 和 Safari 似乎热衷于想要使用自己的默认样式。:(

这是我们正在使用的代码，第一个 div 的背景 url 是应用我们自己的自定义下拉箭头：

<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>
4

2 回答 2

1

编辑现在问题已得到澄清，这里有一个 jsfiddle 可以做你想做的事。

http://jsfiddle.net/wnGs8/30/

您在选择上设置背景图像并使用包装器 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-12T18:10:53.103 回答
0

好吧，如果没有看到任何代码，就很难判断你的答案。“修复”可能是使用 100% 不透明的 .png 图像作为输入的背景。这应该适用于所有现代浏览器。

编辑回复评论：尝试使用background: transparent;andborder: 0;因为这是实现您想要的正确语法。

此外，自定义字体不应该真正影响任何东西。我一直在使用它们。

最后，我们当前的 HTML 和 CSS 标准甚至可能无法实现。这是另一个与您有关的stackoverflow问题。

如何在没有 JavaScript 的情况下仅使用 CSS 设置 <select> 下拉菜单的样式？

于 2012-10-12T18:05:37.287 回答