5

ドロップダウン リストの最初のビューにカスタム フォントと背景を設定しました (選択肢を選択します)。はfont-size20 ピクセルで、カスタム フォントとの相性も抜群です。ただし、リストをクリックすると、オプション自体はカスタムフォントを使用せず、持ち越されているように見える を除いて、通常のように見えますfont-size。これは Chrome の場合にのみ発生するようです (Safari と Firefox もテストしました)。

@font-face {
    font-family: 'Averia Libre';
    font-style: normal;
    font-weight: 400;
    src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
    url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}
select {
    font-size: 20px;
    font-family: 'Averia Libre', cursive;
    background: url(http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg) repeat-x;
    width: 400px;
    font-family: 'Averia Libre';
}
<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>
<select>
    <option value="">I'm a custom font.</option>
    <option value="">Hey me too!</option>
    <option value="">Averia Libre</option>
</select>

オプション自体に別のクラスを作成しようとしましたが、効果がないようでした。

さらに説明するために、ここにJSFiddleがあります。

クロム：

ここに画像の説明を入力

ファイアフォックス:

ここに画像の説明を入力

4

6 に答える 6

6

私はピーターに同意しますが、以下を使用します。

select {
  font-size: 20px;
  font-family: 'Averia Libre', cursive;
}

css ではすべてのドロップダウン フォントが変更されるため、total select の代わりに class を使用する必要があります

CSS

.selectClass {
   font-size: 25px;
   font-family: 'Impact', cursive;
}​

そしてHTML

<link href='http://fonts.googleapis.com/css?family=Averia+Libre' rel='stylesheet' type='text/css'>

<select class="selectClass">
<option value="">I'm a custom font.</option>
<option value="">Hey me too!</option>
<option value="">Averia Libre</option>
</select>​

または、 http://jsfiddle.net/sNkDW/でフィドルを直接見ることができます。

于 2012-05-10T22:12:50.323 に答える
2

ドロップダウン リストが Mac OS X の「ネイティブ UI」によってレンダリングされているようです。

フォントやサイズを設定しても実際には何も変わらない場合は、何もできません。

<select>（をカスタム JavaScript バージョンに置き換える以外）。

于 2012-05-10T22:52:44.473 に答える
2

クロムbackground: white;では、クラス Select に追加してみてください。背景を白に設定することで、Chrome も高さやフォントなどの残りの仕様に従いました。

.yourselectclass select {
    background: white;
    font-size: 16px;
    margin-left: 5px;
    font-family: 'Cabin', sans-serif;
    height: 30px;
    width: 88px;
}
于 2015-05-05T13:46:46.950 に答える
1

Chromeでこれを成功させました。これは、Google Fonts によるカスタム フォントの例です。

フィドル: http://jsfiddle.net/simple/wpHKe/

あなたのHTMLコード：

<select>
<option value="">I'm a custom font.</option>
<option value="">Hey me too!</option>
<option value="">Averia Libre</option>
</select>​

もちろん、CSS:

select {
    font-size: 20px;
    font-family: 'Averia Libre', cursive;
}​

そして、Google から提供された Font Face は次のとおりです。

これは外部スタイル シートとしてリンクされていることがわかりますが、これはその中のコードです。

@font-face {
  font-family: 'Averia Libre';
  font-style: normal;
  font-weight: 400;
  src: local('Averia Libre Regular'), local('AveriaLibre-Regular'),
  url('http://themes.googleusercontent.com/static/fonts/averialibre/v1/rYVgHZZQICWnhjguGsBspHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

編集：

@Jhilomが指摘したように、これがサイトのすべての DropdDowns に影響を与えたくない場合は、次のように CSS クラスを Select に含めてください。

HTML:

<select class="yourSelectClass">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

CSS:

.yourSelectClass
{
/* Your Dropdown CSS here */
}
于 2012-05-10T21:52:27.420 に答える