Frage an google-chrome, css – So ändern Sie die Schriftgröße der Liste (nicht die ursprüngliche Ansicht)

5

Ich habe eine benutzerdefinierte Schriftart und einen benutzerdefinierten Hintergrund für die Erstansicht der Dropdown-Liste festgelegt (Auswahl treffen). Dasfont-size beträgt 20 Pixel und sieht mit der benutzerdefinierten Schriftart großartig aus. Wenn ich jedoch auf die Liste klicke, verwenden die Optionen selbst nicht die benutzerdefinierte Schriftart und sehen normal aus, mit Ausnahme derfont-size, was zu übertragen scheint. Dies scheint nur bei Chrome der Fall zu sein (ich habe auch Safari und Firefox getestet).

<code>@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';
}</code>
<code><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></code>

Ich habe versucht, eine separate Klasse für die Optionen selbst zu erstellen, aber das schien keine Wirkung zu haben.

Zur weiteren Veranschaulichung hier einJSFiddle.

Chrom:

Feuerfuchs:

Das ist wirklich komisch. Bisher funktioniert es gut für drei Personen, die Ihr Problem überprüfen. Das Problem liegt möglicherweise irgendwie bei Ihnen. Aber ich habe keine Ahnung warum. Würde gerne hören, wenn jemand anderes die benutzerdefinierte Schriftart nicht sieht. Peter
@trickeedickeejsfiddle.net/bumpy009/wpHKe/7 domino
Ich bin kein Mac ... Das könnte es sein. domino
Kannst du ein bisschen CSS beifügen, um dies zu beantworten? frontendzzzguy

Deine Antwort

6   die antwort
1

nativen Benutzeroberfläche" von Mac OS X gerendert.

Wenn sich durch das Festlegen der Schriftart und / oder -größe nichts ändert, können Sie nichts dagegen tun.

(Andere als das Ersetzen der<select> mit einerbenutzerdefinierte JavaScript-Version).

Die Schriftgröße ändert sich zwar, sie sollte sich jedoch nicht auf die Liste selbst auswirken. In Chrom macht es. Ich werde in die js-Version schauen, danke. domino
Das war hilfreich für mich:css-tricks.com/dropdown-default-styling Ryan
Vielleicht sollte es die Liste selbst nicht beeinflussen, aber leider gibt es keine Möglichkeit, es zu ändern :((außer mit einem JavaScript-Ersatz) thirtydot
0

ndert werden.

In Firefox: Nur das "ausgewählte" Element im Dropdown-Kombinationsfeld berücksichtigt alle von Ihnen angewendeten CSS-Stile. Der Stil wird nicht auf die Options-Tags heruntergerechnet. Das Hinzufügen eines CSS-Stils zu jedem Optionstag hat keine Auswirkung.

In Chrome: Chrome respektiert das CSS-Styling, das Sie den Select- und Option-Tags hinzufügen. Der Stil wechselt nicht vom Auswahl-Tag zu den Options-Tags, sondern Sie können jedem Options-Tag einen Stil zuweisen.

Ich habe gelesen, dass "der Standard" nicht erfordert, dass die Select- und Option-Tags gestaltbar sind.

6

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

Auf dem CSS wird die gesamte Dropdown-Schriftart geändert, daher sollte er class anstelle von total select verwenden

CSS

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

Und HTML

<code><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>​
</code>

Oder Sie können die Geige direkt auf sehenhttp://jsfiddle.net/sNkDW/

Vielen Dank für die Bemerkung, aber das istDemo aus einem Grund. Solche kleinen Details und Klarstellungen sind keinen vollständigen neuen Beitrag wert. Peter
@domino, Sie können eine beliebige Schriftart verwenden. Ich habe gerade ein Beispiel für die Schriftart "impact" gegeben. Jhilom
Im eigentlichen Code habe ich eine Klasse verwendet. Ich sehe die benutzerdefinierte Schriftart auch nicht in Ihrer Jsfiddle. domino
1

l mit einer benutzerdefinierten Schriftart von Google Fonts.

Geige: http://jsfiddle.net/simple/wpHKe/

DasHTML Code, wie bei Ihnen:

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

Natürlich CSS:

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

Und das Font Face von Google:

Sie können dieses als externes Stylesheet verknüpfen, aber dies ist der darin enthaltene Code.

<code>@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');
}
</code>

Bearbeiten:

Wie von hervorgehoben@ JhilomWenn Sie nicht möchten, dass dies alle DropdDowns auf Ihrer Site betrifft, müssen Sie eine CSS-Klasse wie folgt in die Auswahl einfügen:

HTML:

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

CSS:

<code>.yourSelectClass
{
/* Your Dropdown CSS here */
}
</code>
Sie testen nicht auf einem Mac, oder? thirtydot
Sie können meinen Beitrag auch bearbeiten. Peter
Das eigentliche Dropdown hatte eine Klasse. domino
Ich habe deinen Code ein wenig bearbeitet:jsfiddle.net/bumpy009/wpHKe/7  Es sieht groß aus in Chrom ... domino
0

lem. Die ausgewählte Menügröße wird basierend auf angezeigtTextlänge des Listenelements. Überprüfen Sie Ihr Optionsetikett

Beispiel: Wenn die Options-Tags langen Text enthalten, ist die Schriftgröße des ausgewählten Menüs gering.

2

Versuchen Sie in Chrom hinzuzufügenbackground: white; zur Klasse Auswählen. Indem ich den Hintergrund auf Weiß stellte, befolgte Chrome auch die restlichen Angaben wie Höhe und Schriftart.

<code>.yourselectclass select {
    background: white;
    font-size: 16px;
    margin-left: 5px;
    font-family: 'Cabin', sans-serif;
    height: 30px;
    width: 88px;
}
</code>

Verwandte Fragen