examples - listas desplegables en html ejemplos
¿Cómo cambiar la familia de fuentes del elemento de la lista desplegable? (6)
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.
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.
Esto debería darte una idea sobre cómo 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()})
})
})
<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>
puedes o a través de este sitio obtendrás idea
disfrutar :)
Gracias
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>
Esto se debe a que los elementos de select niños ( option s) no son realmente elásticos y parece que Firefox es el único navegador que ignora esa parte de la especificación.
La solución consiste en reemplazar su elemento select con un widget personalizado que utiliza solo elementos personalizables y quizás un pequeño javascript para la interactividad. como lo que se hace aquí: http://jsfiddle.net/sidonaldson/jL7uU/ o http://jsfiddle.net/theredhead/4PQzp/
Puede establecer las fuentes para un menú desplegable HTML de la siguiente manera:
1. Cree su lista de opciones que se mostrarán 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 realmente desee insertar el menú desplegable en la página, use la etiqueta SELECT y coloque 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>
Eso funciona 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 necesites.
Lo que puede hacer en CSS es lo que describió: configuración de font-family en elementos de option , 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 a partir de un menú desplegable. Entonces puedes usar, por ejemplo
<div><input type="radio" name="font" value="Tahoma" id="tahoma">
<label for="tahoma" style="font-family: Tahoma">Tahoma</label></div>
...