Cmacias.com

Como siempre y siguiendo mi manía de darle forma a los controles “feos” de los navegadores, vemos una forma de poder cambiar los “SelectBox” de forma sencilla.

De forma similar a como cambiabamos los campos de tipo file, debemos crear una estructura alrededer de los campos selectBox de una forma parecida a esta

<div class="selectBox">
   <div class="box" id="box">Plantar un arbol</div>
   <select name="mySelectBox" id="mySelectBox">
      <option value="1" class="primero">Plantar un arbol</option>
      <option value="2">Escribir un libro</option>
      <option value="3" selected="selected">Ser Padre</option>
      <option value="4">Hacer un Blog</option>
      <option value="5" class="ultimo">Un texto largo para ver que efecto produce</option>
   </select>
</div>

Donde el div principal es el contenedor del Select, y el div “box” donde escribiremos la selección del combo. Para poder realizar la última acción, crearemos un evento “onchange” que aplicaremos a nuestro comboBox para poder pasar los datos de la selección al div “box”.

onchange="this.parentNode.getElementsByTagName('div')[0].innerHTML=this.options[this.selectedIndex].text"

Y evidentemente le daremos unos “colorines” para que quede “bonito”.

<style type="text/css">
div.selectBox {
   position: relative;
   width: 150px;
   height: 22px;
   border: 1px solid #036;
   background: url(button.png) 130px center no-repeat;
}
   div.selectBox div.box {
      position: absolute;
      left: 3px;
      top: 3px;
      width: 124px;
      height: 16px;
      line-height: 16px;
      font-family: arial;
      font-size: 11px;
      color: #036;
      overflow: hidden;
   }
   div.selectBox select {
      position: absolute;
      left: -1px;
      top: -1px;
      width: 152px;
      height: 24px;
      border: 1px solid #036;
      opacity: 0;
      filter: alpha(Opacity=0);
      -moz-opacity: 0;
      cursor: pointer;
      z-index:100;
   }
      div.selectBox select option{
         padding: 4px;
         font-size: 11px;
         color: #036;
         border-bottom: 1px solid #eee;
         cursor: pointer;
      }
      div.selectBox select option.ultimo{
         border-bottom: 0px none;
      }
</style>

Para complementar estos estilos, añadimos la siguiente imagen que hará las veces de botón

El resultado funciona en todos los navegadores, exceptuando nuestro querido amigo “Explorer6″ donde no sé si se verá correctamente al tener una “emulación” del mismo.

[ demo ] [ descargar ]