Pergunta sobre css, google-chrome – Como alterar o tamanho da fonte da lista (não a visualização inicial)

5

Eu configurei uma fonte e plano de fundo personalizados para a visualização inicial da lista suspensa (selecione uma opção). ofont-size é 20 pixels e parece ótimo com a fonte personalizada. No entanto, quando clico na lista, as próprias opções não usam a fonte personalizada e parecem normais, exceto pelafont-size, que parece continuar. Este parece ser apenas o caso do Chrome (testei também o Safari e o 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>

Eu tentei criar uma classe separada para as opções em si, mas isso não parece ter nenhum efeito.

Para ilustrar mais, aqui está umaJSFiddle.

Cromada:

Raposa de fogo:

Eu não sou um mac ... Isso poderia ser isso. domino
@trickeedickeejsfiddle.net/bumpy009/wpHKe/7 domino
Isso é muito estranho. Até agora funciona bem para três pessoas que estão revendo o seu problema, o problema pode estar em você de alguma forma. Mas não tenho ideia do porquê. Gostaria de saber se alguém não vê a fonte personalizada. Peter
você pode incluir um pouco de css para ajudar a responder isso, por favor. frontendzzzguy

Sua resposta

6   a resposta
6

Estou de acordo com Peter, mas pelo uso de:

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

no css vai mudar toda a fonte suspensa, então ele deve usar a classe em vez de selecionar total

CSS

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

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

Ou você pode ver o violino diretamente nohttp://jsfiddle.net/sNkDW/

Obrigado pela observação, mas esta édemonstração por uma razão. Esses pequenos detalhes e esclarecimentos não valem um novo post completo. Peter
No código atual, usei uma classe. Eu não vejo a fonte personalizada no seu jsfiddle também. domino
@domino, você pode usar qualquer fonte. Acabei de colocar um exemplo de fonte "impacto" Jhilom
1

zada do Google Fonts.

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

oHTML código, como o seu:

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

Claro, CSS:

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

E a face da fonte que vem do Google:

Você pode ver este link como uma folha de estilos externa, mas este é o código dentro dele.

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

Editar:

Como apontado por@Jhilom, se você não quiser que isso afete todos os DropdDowns em seu site, inclua uma classe CSS no Select, assim:

HTML:

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

CSS:

<code>.yourSelectClass
{
/* Your Dropdown CSS here */
}
</code>
Você não está testando em um Mac, está? thirtydot
A lista suspensa real tinha uma classe. domino
Eu editei seu código um pouco:jsfiddle.net/bumpy009/wpHKe/7  Ele parece grande em cromo ... domino
Você pode editar meu post também. Peter
1

interface do usuário nativa" do Mac OS X.

Se a configuração da fonte e / ou tamanho realmente não mudar nada, não há nada que você possa fazer sobre isso.

(Além de substituir o<select> com umversão JavaScript personalizada).

Talvez isso não deva afetar a lista em si, mas infelizmente não há como alterá-la :((diferente de usar uma substituição de JavaScript) thirtydot
O tamanho da fonte muda, mas não deve afetar a lista em si. No chrome isso acontece. Eu vou olhar para a versão js, ​​obrigado. domino
Isso foi útil para mim:css-tricks.com/dropdown-default-styling Ryan
2

No Chrome, tente adicionarbackground: white; para a classe Select. Ao definir o plano de fundo para branco, o Chrome também seguiu o restante das minhas especificações, como altura e fonte.

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

o Firefox.

No Firefox: Apenas o elemento "selecionado" na caixa de combinação suspensa respeita qualquer estilo CSS que você aplicar. O estilo não cai em cascata para as tags de opção. Adicionar estilo CSS a cada tag de opção não tem efeito.

No Chrome: o Chrome respeita o estilo CSS que você adiciona às tags de seleção e opção. O estilo não desce da tag de seleção para as tags de opção, mas você pode aplicar estilo a cada tag de opção.

Eu li que "o padrão" não exige que as tags select e option sejam estilizadas.

0

não é um problema. O tamanho do menu de seleção é exibido com base nocomprimento do texto do item da lista. Verifique o rótulo da sua opção

Ex: Se você tiver texto longo nas tags de opção, o tamanho da fonte do menu de seleção será pequeno.

Perguntas relacionadas