css - notas - Tamaño del texto para menú desplegable/entrada seleccionar no funciona en Safari

menu desplegable vertical html5

Question

Primera pregunta...

Tengo problemas para que CUALQUIERA del menú desplegable / Selección de entrada aparezca con la fuente de tamaño 18 en Safari.

Funciona bien en FF.

Código:

<form class="form">
<select name="make">
<option value="0"> All</option>
</select>
</form>

Css:

.form input{
font-size:18px;
margin-bottom:0px;
}

¿Algunas ideas? Puede ver en vivo en [ http://www.motolistr.com] [1]

Mejor, Nick

EDIT 1: Gracias por la respuesta rápida. Agregué un estilo a la selección para evitar confusiones. Lo intenté;

<select name=''make'' style=''font-size: 18pt;''>
 </select>

Y

<select name=''make'' style=''font-size: 18px;''>
 </select>

Y

<select name=''make'' style=''font-size: 1.3em;''>
 </select>

Todavía no funciona en SAFARI ... Nuevamente FF funciona bien con los 3.

Mejor, Nick

Answer 1

La select técnicamente no es una etiqueta de input . Intenta asignar una clase a tu selección y establece el estilo para la clase.

EDITAR : Resulta que las selecciones de estilo Aqua solo tienen tres tamaños de fuente diferentes disponibles. Si necesita establecer un tamaño de fuente exacto, puede desactivar Aqua dándole al elemento un color de fondo, luego configure el tamaño. FYI, parece que 20px funciona sin configurar el fondo, por lo que debe tener el tamaño hasta el próximo tamaño Aqua admitido.

Referencia: http://particletree.com/notebook/design-friendly-select-elements-in-safari-3/ . Página de prueba con varios estilos en http://particletree.com/examples/safari3/drop.html .

 <select name=''make'' class=''big-input''>
 </select>


 .big-input
 {
     background: #fff; // turns off Aqua
     font-size: 18pt; // assuming you meant 18pt, not 18px
     margin-bottom: 0px;
 }

Answer 2

Parece que los controles de selección no son de estilo en Safari; siempre usa sus propias rutinas de dibujo de artilugios de estilo OS X para mostrarlas. Hasta hace poco, esta era la norma: los navegadores suelen utilizar widgets simples proporcionados por OS para campos de formulario. CSS2 realmente no dice cómo deberían aplicarse los estilos a los campos de formulario (si es que lo hacen).

Algunos navegadores aplican hoy el estilo de fuente de la selección a las opciones (IE7, Opera); algunos permiten que las opciones de selección en la página y las opciones emergentes tengan un estilo diferente (Mozilla, Chrome), por lo que lo mejor que puede hacer para lograr consistencia es:

.form select, .form option {
    font: Whatever 18px;
}

Pero si necesitas absolutamente un menú desplegable de estilo en Safari, deberás escribir tu propia selección de ersatz en JavaScript. (O vea uno de los muchos scripts existentes y complementos de framework que hacen esto).

Answer 3

Sin embargo, es divertido: si cambias el background -o border propiedades del borde- en tu Safari select , de repente también aplicarás el font-size la font-size .

Answer 4

Configuración de altura de línea: 100% limitará la altura del cuadro de selección para una apariencia más uniforme, pero aún no afecta el tamaño real de la fuente.

Answer 5

Primero fuera de esto

.form input{
font-size:18px;
margin-bottom:0px;
}

no funcionará porque no está diseñando el elemento de selección que está diseñando elementos de entrada. Prueba esto y probablemente funcione.

.form select {
font-size:18px;
margin-bottom:0px;
}

Answer 6

Encontré una forma de cambiar el tamaño de fuente de un elemento seleccionado en Safari mediante el uso de porcentajes .
Su código se convierte en:

<select name=''make'' style=''font-size: 120%;''></select>

Para un tamaño de letra de 13px (que me pareció muy atractivo).

Esto se prueba en Safari 5.1.3

Answer 7

Para configurar un estilo en Safari, primero debes desactivar el diseño del os:

select {
    -webkit-appearance: none;
}

Answer 8

Puede orientar la etiqueta de select Safari haciendo esto:

select {
    width: 224px;
    line-height: 1.8;  (This can be in px too)
}

Answer 9

Al menos en Safari 5.1 (ya no tengo 3 en ejecución) puede desactivar el estilo predeterminado con:

select{-webkit-appearance: none}

Entonces se ajustará al tamaño de la fuente.

Answer 10

Descubrí una forma de que safari se adapte al tamaño de fuente ... todo lo que necesitas hacer es establecer un color de borde, como el siguiente.

-webkit-apariencia: ninguno; hará que pierdas todos los atributos del safari, como las flechas ... a continuación puedes aumentar el tamaño sin perder eso.

Trabajará en Safari

<select style=" font-size: 3em; border: black;">
    <option>TEXT</option>
</select>

No funcionará en Safari

<select style=" font-size: 3em;">
    <option>TEXT</option>
</select>

Answer 11

prueba esto

<style>
select { border:0; color:#000000; background:transparent;
font-size:20px; font-weight:bold; padding:2px 10px; width:378px;
*width:350px; *background:#FFFFFF; -webkit-appearance: none; }

#mainselection { overflow:hidden; width:350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("img/arrow.gif") no-repeat scroll 319px 5px #FFFFFF; 
}
</style>