Pytanie w sprawie google-chrome, css – Jak zmienić rozmiar czcionki listy (nie widok początkowy)

5

Ustawiłem niestandardową czcionkę i tło dla początkowego widoku listy rozwijanej (Wybierz wybór). Thefont-size ma 20 pikseli i wygląda świetnie z niestandardową czcionką. Jednak po kliknięciu na liście same opcje nie używają niestandardowej czcionki i wyglądają normalnie, z wyjątkiem czcionkifont-size, który wydaje się przenosić. Tak wygląda w przypadku Chrome (testowałem także Safari i Firefox).

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

Próbowałem utworzyć osobną klasę dla samych opcji, ale nie miało to żadnego wpływu.

Aby to zilustrować, oto aJSFiddle.

Chrom:

Firefox:

Nie jestem macem ... To może być to. domino
@trickeedickeejsfiddle.net/bumpy009/wpHKe/7 domino
To jest naprawdę dziwne. Jak dotąd działa dobrze dla trzech osób, które przeglądają Twój problem, problem może być w tobie. Ale nie mam pojęcia dlaczego. Chciałbym usłyszeć, czy ktoś inny nie widzi niestandardowej czcionki. Peter
czy możesz dołączyć trochę css, aby odpowiedzieć na to pytanie. frontendzzzguy

Twoja odpowiedź

6   odpowiedzi
1

że lista rozwijana jest renderowana przez „rodzimy interfejs użytkownika” systemu Mac OS X.

Jeśli ustawienie czcionki i / lub rozmiaru właściwie niczego nie zmienia, nic nie możesz na to poradzić.

(Inne niż zastąpienie<select> zniestandardowa wersja JavaScript).

Rozmiar czcionki się zmienia, ale nie powinien wpływać na samą listę. W chrome to robi. Dziękuję, zajrzę do wersji js. domino
Może nie powinno to wpłynąć na samą listę, ale niestety nie ma sposobu, aby to zmienić :((inne niż używanie zamiennika JavaScript) thirtydot
To było dla mnie pomocne:css-tricks.com/dropdown-default-styling Ryan
0

ksie.

W Firefoksie: Tylko „wybrany” element w rozwijanym polu kombi respektuje każdą zastosowaną stylizację CSS. Styl nie spada kaskadowo do znaczników opcji. Dodanie stylu CSS do każdego znacznika opcji nie ma wpływu.

W Chrome: Chrome szanuje styl CSS dodany do znaczników wyboru i opcji. Styl nie spada kaskadowo ze znacznika wyboru do znaczników opcji, ale można zastosować styl do każdego znacznika opcji.

Czytałem, że „standard” nie wymaga, aby znaczniki wyboru i opcji były możliwe do dostosowania.

0

ybranego menu pojawia się na podstawiedługość tekstu listy elementów. Sprawdź etykietę opcji

Np .: Jeśli w znacznikach opcji znajduje się długi tekst, rozmiar czcionki wybranego menu będzie mały.

2

W chrome spróbuj dodaćbackground: white; do klasy Wybierz. Ustawiając tło na biały Chrome, podążyłem za resztą moich specyfikacji, takich jak wysokość i czcionka.

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

nki Google Fonts.

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

TheHTML kod, jak twój:

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

Oczywiście CSS:

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

A twarz czcionki, która pochodzi od Google:

Możesz zobaczyć ten połączony jako zewnętrzny arkusz stylów, ale jest to kod wewnątrz niego.

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

Edytować:

Jak zauważył@Jhilom, jeśli nie chcesz, aby miało to wpływ na wszystkie DropdDowns w Twojej witrynie, pamiętaj o dołączeniu Klasy CSS do Wyboru, tak jak poniżej:

HTML:

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

CSS:

<code>.yourSelectClass
{
/* Your Dropdown CSS here */
}
</code>
Zmodyfikowałem trochę twój kod:jsfiddle.net/bumpy009/wpHKe/7  Wygląda na duży w chromie ... domino
Nie testujesz na Macu, prawda? thirtydot
Rzeczywista lista rozwijana miała klasę. domino
Możesz także edytować mój post. Peter
6

Zgadzam się z Piotrem, ale przez użycie:

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

na css zmieni całą rozwijaną czcionkę, więc powinien użyć klasy zamiast całkowitego wyboru

CSS

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

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

Albo możesz zobaczyć skrzypce bezpośrednio nahttp://jsfiddle.net/sNkDW/

@domino, możesz użyć dowolnej czcionki. Po prostu umieściłem przykład „wpływu” czcionki Jhilom
Dziękuję za uwagę, ale tak jestpróbny z powodu. Takie drobne szczegóły i wyjaśnienia nie są warte kompletnego nowego posta. Peter
W rzeczywistym kodzie użyłem klasy. Nie widzę też niestandardowej czcionki w jsfiddle. domino

Powiązane pytania