se puede colocar un estilo a un select

esaenz22 · #1 (**permalink**) 27/01/2010, 13:58

buenas. mi consulta es si hay posibilidad de colocar un estilo a un select como la imagen que voy a mostrar:

si es posible como se desarrollaria ?.

AlbertoGarcia · #2 (**permalink**) 27/01/2010, 14:04

Si pero con limitaciones. Ese combo parece de flash. Lo podrías hacer todo menos cambiar el botón para abrir las opciones. A no ser que usaras javaScript.

Salud!

esaenz22 · #3 (**permalink**) 27/01/2010, 14:38

gracias por responder. no se veia la imagen.

que extraño. lo voy a colocar de nuevo por si las dudas.

saludos.

AlbertoGarcia · #4 (**permalink**) 27/01/2010, 14:55

Si andas fino de inglés aquí tienes para distraerte un rato, aunque yo no me complicaría:

http://www.easy-designs.net/articles/replaceSelect/
http://www.easy-designs.net/articles/replaceSelect2/

Por otro lado lo poco que se puede hacer es esto:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" />
    </head>
    <style type="text/css">
        <!--
        select {
            width: 14em;
            background-color: #fff;
            color: #676767;
            font-size: 10px;
            border: 1px solid #676767;
        }
        -->
    </style>
    <body>
        <select>
            <option value="Encapsulados">Encapsulados</option>
            <option value="lorem">lorem</option>
            <option value="ipsum">ipsum</option>
            <option value="dolor">dolor</option>
            <option value="amet">amet</option>
        </select>
    </body>
</html>

De todos modos piensa que cambiar el aspecto por defecto de ciertos objetos va en detrimento de la usabilidad. Todos estamos habituados a usar estos objetos y no tenemos que pensar en qué son y cómo se usan, cuidado con la creatividad si te da por seguir los enlaces de arriba.

Salud!

esaenz22 · #5 (**permalink**) 27/01/2010, 15:01

gracias por responder AlbertoGarcia. leere los enlaces que has puesto y el codigo que pusiste.

hay 2 preguntas que quisiera hacerte.

1. no entendi la parte que dijiste:

De todos modos piensa que cambiar el aspecto por defecto de ciertos objetos va en detrimento de la usabilidad. Todos estamos habituados a usar estos objetos y no tenemos que pensar en qué son y cómo se usan, cuidado con la creatividad si te da por seguir los enlaces de arriba.

2. el css que pusiste, es compatible con los navegadores ie6, ie7, ie8, mozilla firefox y google chrome ?.

saludos.

AlbertoGarcia · #6 (**permalink**) 27/01/2010, 17:08

Hola de nuevo,

Cita:

1. no entendi la parte que dijiste:

De todos modos piensa que cambiar el aspecto por defecto de ciertos objetos va en detrimento de la usabilidad. Todos estamos habituados a usar estos objetos y no tenemos que pensar en qué son y cómo se usan, cuidado con la creatividad si te da por seguir los enlaces de arriba.

La usabilidad de un objeto determina la facilidad con la que somos capaces de percibir su finalidad y la forma de alcanzar esta por medio de ese objeto. Si cambiamos demasiado el aspecto de un objeto que ya está estandarizado corremos el riesgo de mermar su usabilidad, es decir, que el usuario de nuestra página no sepa que ese select tan chulo que hemos diseñado es un select y no sepa muy bien como se usa o si nisiquiera se usa. Más info en: http://www.sidar.org/recur/desdi/tra...quees/usab.htm

Respecto de tu segunda duda, y aunque puedes comprobarlo por ti mismo, el css es válido para todos los navegadores modernos excepto para el puñetero IE, no recuerdo si en IE8 tambien da problemas. Pero para IE hay chapuzas varias para que funcione, esta es una algo engorrosa complicada: http://swatelier.info/at/forms/selectExp.htm

Salud!

esaenz22 · #7 (**permalink**) 27/01/2010, 18:00

entiendo. es decir que buscando una mejor alternativa apra el diseño del select, logre ese resultado pero al final el cliente no sabe muy bien como utilizarlo y se enredaria.

gracias por la aclaracion.

saludos.