html - formulario - Estilo del texto OPTION
formulario html5 (5)
En algunos casos, podría hacer eso por jQuery. Mira aquí: http://jsfiddle.net/rangine/wegx00La/4/
Usé un cuadro de selección para elegir un ícono de glifo en la forma de arranque. pero desafortunadamente esto solo funcionó en Firefox. (No lo pruebo en todos los navegadores. ¡En Chrome no funciona y en IE! Lo tiré de distancia .
Html:
This code Only works in Firefox.
<br/>
<select id="myselect">
<option value="_none"> - Select One - </option>
<option value="asterisk">asterisk</option>
<option value="plus">plus</option>
<option value="euro" class="red">euro</option>
<option value="eur">eur</option>
<option value="minus" class="green">minus</option>
<option value="cloud">cloud</option>
<option value="envelope">envelope</option>
<option value="pencil">pencil</option>
<option value="glass">glass</option>
<option value="music">music</option>
<option value="search">search</option>
<option value="heart">heart</option>
<option value="star">star</option>
<option value="star-empty">star-empty</option>
<option value="user">user</option>
<option value="film">film</option>
</select>
<span class="preview"> </span>
jquery:
(function($) {
$(document).ready(function() {
$(''#myselect option'').each(function() {
$(this).html(''<i class="glyphicon glyphicon-'' + $(this).text() + ''"></i> '' + $(this).text());
})
});
$(''.preview'').html('' <i class="preview glyphicon glyphicon-'' + $(''#myselect'').val() + ''"></i>'');
$(''#myselect'').change(function() {
$(''.preview'').html('' <i class="preview glyphicon glyphicon-'' + $(''#myselect'').val() + ''"></i>'');
});
})(jQuery);
Algunos CSS:
#myselect {
margin: 40px;
height: 30px;
font-size: 14pt;
}
option.red {
color: red;
}
option.green {
color: green;
}
.preview {
font-size: 20pt;
}
Tengo una lista SELECCIONADA con varios elementos de OPCIÓN. Este es mi enfoque ingenuo para diseñar una parte del texto de la opción:
<select name="color">
<option value="0">red <span style="font-weight: bold;">SLOW</span></option>
<option value="1">blue <span style="font-weight: bold;">SLOWER</span></option>
<option value="2">green <span style="font-weight: bold;">SLOWEST</span></option>
</select>
Esto no funciona: al navegador no le gusta un elemento SPAN dentro del elemento OPTION.
¿Hay alguna otra forma de estilo parte del texto de un elemento de OPCIÓN?
Esto es más como una respuesta / solución a la pregunta cerrada como un duplicado en otras etiquetas en lugar de un estilo en particular para <opciones> .
Si no te importa ensuciarte con JavaScript, Select2 proporciona una forma muy concisa de lograrlo. También usa listas para eso.
Aquí está HTML
<select id="e1" style="width:300px">
<option value="AL" data-badge="3">Alabama</option>
<option value="WY">Wyoming</option>
</select>
Y aquí está CoffeeScript
$("#e1").select2
theme: "bootstrap"
templateResult: (data) ->
badge = $(data.element).data(''badge'')
if badge
return $(document.createTextNode(data.text)).add($(''<span class="badge pull-right">'').text(badge))
data.text
Nop. option se diseñan de una manera nativa de la plataforma, y diseñar solo una parte de una no funciona. (Por lo general, tampoco sería una buena idea).
O puede hacerlo con Bootstrap Drop Downs más un par de líneas de Javascript.
Aquí está el ejemplo de Bootstrap con una ligera alteración más un ''lil Javascript:
$(function() {
$(''#my-select'').find(''li'').click(function() {
$(''#selected'').html($(this).html());
});
});
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Single button -->
<div id=''my-select'' class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span id="selected">Action</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action <span style=''color:red''>like Super Man</span></a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</body>
Pero siempre puedes crear un cuadro de selección personalizado. Consulte el jsFiddle a continuación,
JSFiddle para opciones de cuadro de selección multicolores
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$(''<li />'', {
html: $this.children(''option'').eq(i).text()
.split('' '').join('' <span style="color:red">''),
rel: $this.children(''option'').eq(i).val()
}).appendTo($list);
}