lunes, 18 de noviembre de 2013

Como dar estilos css a un campo select


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