Bienvenid@s, hoy veremos como dar estilos CSS a un campo select, para cambiar de cierto modo su apariencia predeterminada, para ello
le aplicaremos una serie de propiedades CSS, a través de una clase a la cual llamaremos "select" ...
border : Para aplicar estilos al borde del campo select.
font-size : Para aplicar el tamaño de fuente del campo select.
font-family : Para aplicar el tipo de fuente del campo select.
font-style : Para aplicar el estilo de fuente del campo select.
padding : Para establecer unos márgenes entre el texto y el borde del campo select.
border-radius : Para redondear las esquinas del campo select.
background : Para establecer el color de fondo del campo select.
color : Para establecer el color del texto del campo select.
También utilizaremos el evento :hover para aplicar nuevos estilos cuando se pase el cursor sobre el campo select.
DEMO SELECT ...
Código del ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como dar estilos css a un campo select</title>
<style>
.select
{
border: 1px solid #DBE1EB;
font-size: 18px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
background: #FFFFFF;
background: linear-gradient(left, #FFFFFF, #F7F9FA);
background: -moz-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -webkit-linear-gradient(left, #FFFFFF, #F7F9FA);
background: -o-linear-gradient(left, #FFFFFF, #F7F9FA);
color: #2E3133;
}
.select:hover
{
border-color: #FBFFAD;
}
.select option
{
border: 1px solid #DBE1EB;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
}
.select option:hover
{
background: #FC4F06;
background: linear-gradient(left, #FC4F06, #D85F2B);
background: -moz-linear-gradient(left, #FC4F06, #D85F2B);
background: -webkit-linear-gradient(left, #FC4F06, #D85F2B);
background: -o-linear-gradient(left, #FC4F06, #D85F2B);
font-style: italic;
color: #FFFFFF;
}
</style>
</head>
<body>
<select class="select">
<option>- PRIMERO</option>
<option>- SEGUNDO</option>
<option>- TERCERO</option>
<option>- CUARTO</option>
</select>
</body>
</html>
select para blogger, select para blog, estilos CSS a un select para blogger, estilos CSS a un select para Wordpress
No hay comentarios:
Publicar un comentario