Tengo un menú desplegable que enumera las familias de fuentes. Como Tahoma, Arial, Verdana, etc. Quiero cambiar la familia de fuentes de cada elemento desplegable de acuerdo con el valor que representa. Al igual que Photoshop lo hace.¿Cómo cambiar la familia de fuentes del elemento de la lista desplegable?
Cambié el CSS para cada elemento desplegable, pero solo funciona en FireFox. No funciona en ningún otro navegador.
No quiero usar ningún plugin jQuery.
Eso es porque el select elementos hijos (option s) no son realmente con estilos y Firefox parece ser el único navegador que ignora esa parte de la especificación.
La solución alternativa es reemplazar su elemento select con un widget personalizado que utiliza solo elementos personalizables y tal vez un pequeño javascript para la interactividad. al igual que lo que se hace aquí:
http://jsfiddle.net/sidonaldson/jL7uU/
o http://jsfiddle.net/theredhead/4PQzp/
<select>
<option style="font-family: 'Comic Sans MS'">Comic Sans MS</option>
<option style="font-family: Arial">Arial</option>
<option style="font-family: 'Times New Roman'">Times New Roman</option>
</select>
puede o a través de este sitio u conseguirá idea
disfrutar :)
gracias
Lo que puede hacer en CSS es lo que usted describe: Configuración de font-family en option elementos, y esto tiene un soporte de navegador limitado. Los navegadores pueden implementar elementos select utilizando rutinas que son parcial o totalmente inmune a CSS.
La solución consiste en utilizar algo más que un elemento select, como un conjunto de botones de opción, pero, por supuesto, se representará de manera diferente desde un menú desplegable. Entonces puedes usar, por ej.
<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...
Esto debe darle una idea de ho de lograr esto:
<select>
<option value="Arial">First</option>
<option value="Verdana">Second</option>
</select>
$(function() {
$('select > option').hover(function() {
$(this).parent().css({fontFamily:$(this).val()})
})
})
dijo que no quiere usar jquery. – khurram
Merece la pena considerarlo si se trata de un navegador cruzado, pero no funcionó en Chrome cuando lo probé en este momento. –
Prueba esto:
<html>
<head>
<style>
.styled-select {
overflow: hidden;
height: 30px;
}
.styled-select select {
font-size: 14pt;
font-family:"Times New Roman",Times,serif;
height: 10px;
}
</style>
<title></title>
</head>
<body>
<div class="styled-select">
<select>
<option selected="selected" >One</option>
<option >Two</option>
</select>
</div>
</body>
</html>
Es posible ajustar las fuentes para un desplegable HTML de la siguiente manera:
1. construir su lista de opciones que se desplayed en su menú desplegable, pero no aplique ningún estilo/clase a ninguna de esas opciones. En PHP, almacenaría mi lista de opciones en una variable y luego usaría esa variable para agregar opciones a mi menú desplegable, que mostraré a continuación.
2. Cuando se desea insertar en realidad el menú desplegable en la página, utilice la etiqueta SELECT y poner un poco de estilo CSS dentro de esa etiqueta como he mostrado a continuación:
<SELECT style='font-size: 10px; font-family: "Verdana", Sans-Serif;' name='???????'>
<?php echo $your_variable_containing_dropdown_content; ?>
</SELECT>
que funciona al 100% bien para mí en el sitio web en el que estoy trabajando actualmente Este es solo el estilo que he usado en mi página, pero puede ser lo que sea que necesites.
Firefox realmente no está violando las especificaciones. Por el contrario, las especificaciones no dicen nada sobre el tema de si los elementos 'option' son editables (aunque la expectativa natural sería que se les pueda diseñar como cualquier otro elemento, pero las implementaciones a menudo usan tecnologías que no permiten eso). –
Recuerdo haber leído que los controles de formulario deben ser nativos de la plataforma. Parece que no puedo encontrar dónde lo leí, y es posible que simplemente me equivoque sobre dónde lo leí. Aún así, la mayoría de los navegadores usan controles de forma nativos de plataforma por lo que yo sé. – Kris
http://jsfiddle.net/sidonaldson/jL7uU/ el enlace no funciona –