18
Mar

Eliminar borde en el elemento select

Al crear un formulario y añadir el elemento “select” por defecto IE6 y IE7 (En IE8 ya solventaron el problema) lo muestra con borde, pero claro, hay formularios que queremos que se muestren de otra forma que no con el borde blanco.

Ejemplo de select por defecto en IE6 y IE7:
Elemento select en IE6 y IE7

En el resto de navegadores bastaría con ponerle esto a nuestra hoja de estilos (css):

select {border:none;}

Nos quedaría de la siguiente forma:
Select navegadores estándares
Para que nos quedara igual como el resto de los navegadores estándares tendríamos que añadir lo siguiente en nuestra hoja de estilos (css) yo recomiendo añadir el código en una hoja específica para cada navegador (IE6 y IE7).

.capaSelect {
  position:relative;
  width:126px;
  height:18px;
  overflow:hidden;
}
.capaSelect select {
  background:#9999CC;
  position:absolute;
  width:130px;
  top:-2px;
  left:-2px;
}

Y el código html:

<div class="capaSelect">
    <form>
        <select>
            <option>dixso.net</option>
        </select>
    </form>
</div>

Ejemplo aquí.

Bookmark and Share
aaa

Ningún comentario

Aún no hay comentarios.

Tienes que estar conectado para publicar un comentario.

Comentarios RSS Feed   TrackBack URL