Aplicar css a campo select.
3 seguidores
Me gustaría saber si existe alguna manera de cambiar el aspecto de un campo select utilizando css o cualquier otro metodo para que se parezca a esto:
http://www.interbanner.com/juanma/ejemplo_select.gif
de momento solo he podido conseguir esto:
http://www.interbanner.com/juanma/ejemplo_select02.gif
Gracias gente.
P.D.: No me serviria utilizar un menú desplegable utilizando capas y dhtml.
orange
Puedes cambiar el borde, la letra, el padding el margin ... y con IE aplicar estilos a la felchita (como al scroll).
Creo que no se puede hacer mucho más
Juanma
¿Sabes donde puedo encontrar un ejemplo, o un documento que se refiera la tema?, he buscado en google pero no he encontrado nada claro.
orange
Me pillas que me tengo que pirar Juanma, además hasta después del finde no vuelvo a mi casa.
De memoria:
SELECT { color: back: font: border: ... }
Utiliza las propiedades normales CSS, prueba que te sale
Y si no
.miSelect {igual}
<select class="miSelect">
Prueba también con las propiedades del scroll
no me encuentro el lin, sé que hay alguno.
Siento no poder ayudarte más Juanma, de verdad
Juanma
Muchas gracias de todas formas, no te preocupes y disfruta vayas donde vayas.
hartum
habia un post con este mismo tema de todas formas prueba con este codigo
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px}
.dropb {
font: normal 9px "Small Fonts", VT100, Arial, Helvetica;
color: #505050;
border: 2px solid #c0c0c0;
width: 115px;
; background-color: #FFCC33}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<br><br><br>
<div style="position:relative;margin-right:7px;width:117px;height:18px;border:1px solid #c0c0c0;background-color:#FFFFFF">
<div style="position: absolute;left:0px;top:-1px;width:115px;height:17px;clip:rect(2,113,15,2);">
<SELECT class="dropb">
<option value="" SELECTED>FRIENDLY LINKS
<option value="">- - - - - - - - - - - - - - - - - - - - - - - - - -
<option value="http://www.webarkstudio.com">WEBARKSTUDIO
<option value="http://www.copyrightmagazine.com">COPYRIGHTMAGAZINE
<option value="http://www.publircidad.com">PUBLIRCIDAD
<option value="http://www.e-site-es.com">E-SITE
<option value="http://www.creatiu.com">CREATIU
<option value="http://www.offf.org">OFFF
</select>
</div>
</div>
</body>
</html>
copiado de la pagina de microbians, una vez mas disculpas Gabriel.
Juanma
Gracias lo probare, solo con la aprobación de Microbians, y te aseguro que no me voy a limitar a copiar y pegar.
Juanma
Es un ejemplo buenisimo.
Hartum, ¿tienes la url del otro post que mencionas?.
microbians Staff
Hombre claro sisi usarlo jeje... de todas formas tengo que mirar por ahí porque tenia un código en javascript (lo uso en este foro - quizas mirar el código - aunque ahora no recuerdo si es asi) que aplica el clipping adecuado según el navegador/plataforma (no todos) para quitarle los bordes... pero el scroll sale grueso igualmente.
Juanma
He hecho pruebas y este último ejemplo funciona en todos los navegadores que tengo instalados netscape 7 ie6 y Opera6 y 7, aunque Opera no te respeta el estilo, si embargo los campos select del foro en Opera se desplazan todos a la esquina superior izquierda al igual que las casillas de verificación.
Todavia no he encontrado nada para cambiar el estilo del botón del campo select, seguire investigando un poco más.
orange
Al lorete com el Opera al aplicar estilos a campos CHECKBOX, es cierto que hace algo raro con los de DMSTK y ya me lo he encontrado en algunos sitios más. a mi me huele a bug del navegador, probad la última versión (creo 7.02) que no se si lo soluciona ...
Juanma
Que va, sigue igual
orange
:(