css genra un fondo personalizado al select asi es personalizado .. y en la parte de colors .. genera

Posted 2021-05-13

jQuery(document).ready(function($){
	selectWidth = '300';
$('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>').appendTo("head");
	$("select.styled").each(function(){
	id = $(this).attr( 'name' );
	valor = $(this).data('texto');
    $('<span class="select" id="'+id+'">'+valor+'</span>').insertBefore($(this));
    // $($(this).parent()).prepend('<span class="select" id="'+id+'">Echo</span>');
});
	$('select.styled').change(function(){
		yo = $(this);
		valor= $('option:selected',this).text();
		id = $(this).attr( 'name' );
		$('#'+id).text(valor);
	});

var colors = ['#cc9933', '#cc3333', '#993366','#666666','#663333','#333366','#ff6633','#ffcc00','#cccccc','#3399ff','#006699','#336633','#000000','#333399','#9999cc','#666666','#ffffff'];
$('.color').each(function(){
	var random_color = colors[Math.floor(Math.random() * colors.length)];
	$(this).css('background', random_color);
});
});

.select {
	position: absolute;
	width: 300px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
	height: 50px;
	padding: 15px 50px 0px 20px;
	color: #aaa;
	font-family: 'avenir_lt_35_lightregular';
    font-size: 22px;
	background: url(../media/imagenes/seguros-autos/selectbox.png) no-repeat #fff right center;
	overflow: hidden;
        margin: 10px 0px 10px 0px;
        font-weight: lighter;
        max-width: 300;
}
select.styled {
    min-height: 50px !important;
        margin: 10px 0px 10px 0px;
}