3

我在我的项目中使用来自 Google 字体的 Ubuntu 字体。不幸的是，在使用字体时，Firefox 不显示选择/下拉菜单的右边框。

我创建了一个小提琴，用 Firefox检查一下。

Firefox 中的边框消失

相关代码

<link 
    href="http://fonts.googleapis.com/css?family=Ubuntu" 
    rel="stylesheet" type="text/css" />

<style>
    input, textarea, select, span
    {
        font-family: 'Ubuntu' , sans-serif !important;
        font-size: 13px;
    }​
</style>

<span>Some text to show that the font is indeed in use</span>
<br />
<select name="testSelect" id="testSelect">
    <option value="1">1</option>
    <option selected="selected" value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>​
4

2 回答 2

0

尽管这可能不是您正在寻找的答案，但总的来说，我尽量避免<select>直接为元素设置样式。一种浏览器与另一种浏览器中“采用”的属性似乎差异很大，因此它似乎永远无法正常工作。例如，我在 Chrome 中检查了您的 jsFiddle，下拉列表完全忽略了您的 Ubuntu 字体声明。这就是 Chrome 滚动的方式。

所以，我的建议是删除样式select表中的样式，让浏览器做他们的事情。这种方法的结果是用户将在他们的浏览器中获得他们熟悉的下拉菜单。

综上所述，如果你真的需要为下拉菜单设置样式，那么有一些方法可以基本上<select>用 javascript 劫持一个元素，然后用一堆 div 替换它。我喜欢为这类事情选择的库。当它<div>在页面上呈现时，您可以根据自己的喜好设置样式。

于 2012-05-11T14:18:31.653 回答
0

请设置宽度选择/下拉菜单。

于 2012-05-11T12:57:53.267 回答