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 に置き換える方法があります。この種のことについては、 Chosenライブラリが気に入っています。ページに がレンダリング<div>されると、思いのままにスタイルを設定できます。

于 2012-05-11T14:18:31.653 に答える
0

幅の選択/ドロップダウンを設定してください。

于 2012-05-11T12:57:53.267 に答える