2012-05-10 34 views
5

Ustawiłem niestandardową czcionkę i tło dla początkowego widoku listy rozwijanej (Wybierz opcję). Model font-size ma 20 pikseli i wygląda wspaniale z niestandardową czcionką. Jednak kiedy klikam na liście, same opcje nie używają niestandardowej czcionki i wyglądają normalnie, z wyjątkiem font-size, która wydaje się przenosić. Wydaje się, że tak jest tylko w przypadku Chrome (testowałem także Safari i Firefox).Jak zmienić rozmiar czcionki listy (nie widok początkowy)?

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

Próbowałem tworzyć oddzielną klasę dla samych opcji, ale które nie wydają się mieć żadnego wpływu.

Aby zilustrować dalej, oto JSFiddle.

Chrome:

enter image description here

Firefox:

enter image description here

+0

możesz dołączyć trochę css, aby pomóc w odpowiedzi na to pytanie. – frontendzzzguy

+1

@trickeedickee http://jsfiddle.net/bumpy009/wpHKe/7/ – domino

+0

To jest naprawdę dziwne. Jak dotąd działa dobrze dla trzech osób, które sprawdzają twój problem, problem może w tobie być. Ale nie mam pojęcia, dlaczego. Chciałbym usłyszeć, jeśli ktoś jeszcze nie zobaczy niestandardowej czcionki. – Peter

Odpowiedz

1

Robiłem to z powodzeniem na Chrome. Oto przykład z niestandardową czcionką autorstwa Google Fonts.

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

Kod HTML, jak Twoja:

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

Oczywiście, CSS:

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

A Czcionka, która przychodzi od Google:

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

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

Edit:

Jak podkreślił @Jhilom, jeśli nie chcesz to mieć wpływ na wszystkie DropdDowns na swojej stronie, należy pamiętać o klasę CSS do Select tak:

HTML:

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

CSS:

.yourSelectClass 
{ 
/* Your Dropdown CSS here */ 
} 
+1

Edytowałem trochę twój kod: http://jsfiddle.net/bumpy009/wpHKe/7/ Wygląda na duży w chromie ... – domino

+0

Możesz także edytować mój post. – Peter

+0

Rzeczywiste menu miało klasę. – domino

6

mam uzgodnione z Piotrem, ale przez zastosowanie:

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

na css będzie zmienić wszystkie czcionki rozwijanej więc powinien użyć klasy zamiast całkowitej wybierz

CSS

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

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

Albo można zobaczyć na skrzypcach bezpośrednio na http://jsfiddle.net/sNkDW/

+0

Dziękuję za uwagę, ale to jest ** demo ** z jakiegoś powodu. Takie drobne szczegóły i wyjaśnienia nie są warte zupełnie nowego postu. – Peter

+0

W samym kodzie użyłem klasy. Nie widzę niestandardowej czcionki w twoim jsfiddle. – domino

+0

@domino, możesz użyć dowolnej czcionki. Dodałem przykład czcionki "impact" – Jhilom

1

Wygląda na liście rozwijanej listy jest świadczenie przez „native UI” w Mac OS X.

Jeśli ustawienie czcionki i/lub rozmiaru nic nie zmienia, nic nie możesz z tym zrobić.

(Inne niż zastąpienie <select> z custom JavaScript version).

+0

Rozmiar czcionki się zmienia, ale nie powinien wpływać na samą listę. W chromie to robi. Zajrzę do wersji js, dzięki. – domino

+0

Może to nie powinno wpłynąć na samą listę, ale niestety nie ma sposobu, aby to zmienić :(* (poza używaniem JavaScript) * – thirtydot

+0

To było dla mnie pomocne: http://css-tricks.com/dropdown- domyślny styl / – Ryan

2

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

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

Styl CSS tekstu wewnątrz znaczników opcji nie może być zmieniony w Firefoksie.

W przeglądarce Firefox: Tylko "wybrany" element w rozwijanym menu zawiera wszystkie style CSS, które stosujesz. Styl nie spływa kaskadowo do znaczników opcji. Dodanie stylu CSS do każdego tagu opcji nie ma żadnego efektu.

Chrome: Chrome respektuje styl CSS dodawany do tagów select i option. Styl nie spływa kaskadowo ze znacznika wyboru do znaczników opcji, ale można zastosować styl do każdego znacznika opcji.

Przeczytałem, że "standard" nie wymaga, aby znaczniki wyboru i opcji były stylible.

0

Mam do czynienia z tym samym problemem. Właściwie to nie jest problem. Wybrany rozmiar menu pojawia się na podstawie długości tekstu listy pozycji . Sprawdź etykietę opcji

Np .: Jeśli masz długi tekst w opcjach opcji, rozmiar wybranej opcji menu będzie mały.

Powiązane problemy