aplicar estilo a select

Hola Melisa. El <select> es lo que se llama un control "ventanizado" (es
decir, que hereda las características generales de las ventanas del
sistema operativo). Podrás aplicarle color de fondo, alguna cosa en el
borde, tipo de letra, etc. pero no podrás cambiar la "barrita" de
desplazamiento. En IE sí que se puede, pero no es muy recomendable, dado
que no es un estándar y con toda probabilidad desaparecerá en la próxima
versión del navegador.

Saludos!
Miguel

Melisa Fernández wrote:

Hola a todos,
mi duda es la siguiente se puede aplicar estilo al tag select para aplicarle
un borde y cambiar el color de la barrirta de desplazamiento?
Muchas gracias, un saludo

Hola de nuevo,
me podrias indicar alguna pagina o algun ejemplo para poder aplicar estilo a
<select> por mas q busco no encuentro gran cosa.

Muchas gracias
Un saludo

"Miguel Gonzalez" escribió en el mensaje
news:
Hola Melisa. El <select> es lo que se llama un control "ventanizado" (es
decir, que hereda las características generales de las ventanas del
sistema operativo). Podrás aplicarle color de fondo, alguna cosa en el
borde, tipo de letra, etc. pero no podrás cambiar la "barrita" de
desplazamiento. En IE sí que se puede, pero no es muy recomendable, dado
que no es un estándar y con toda probabilidad desaparecerá en la próxima
versión del navegador.

Saludos!
Miguel

Melisa Fernández wrote:

Hola a todos,
mi duda es la siguiente se puede aplicar estilo al tag select para

aplicarle

un borde y cambiar el color de la barrirta de desplazamiento?
Muchas gracias, un saludo

Hola Melisa. La referencia oficial en cuanto a CSS (1 y 2.1) la puedes
consultar en:

http://www.w3.org/TR/CSS1
http://www.w3.org/TR/CSS21/

En cuanto a ejemplos, uno sería éste:

En el encabezado de la página (en una hoja CSS externa) defines el
estilo de los elementos que componen el select. Son dos: <select> y <option>

<style type="text/css">
select{
background-color: #ff0;
width: 200px;
font-family: sans-serif;
font-size: 14pt;
font-weight: bold;
padding: 1em;
margin: 1em;
}
option{
background-color: #ff9;
border-width: 1px;
border-style: solid;
border-color: #f00;
}
</style>

fíjate en que no especifico nada de bordes al <select> ya que es un
control "ventanizado". Al <option> sí que lo especifico, aunque en el IE
no verás los efectos de bordes, al igual que no verás la diferencia de
color entre el <select> y los <option>

Y en el cuerpo de la página pones un <select> de prueba:

<select>
<option value="1">Un camaleón</option>
<option value="2">Dos camaleones</option>
<option value="3">Tres camaleones</option>
<option value="4">Cuatro camaleones</option>
<option value="5">Cinco camaleones</option>
</select>

Es recomendable que compares el resultado con distintos navegadores (no
todos aplican de igual forma las reglas de estilo).

Te he puesto de ejemplo algunas de las reglas de estilo más utilizadas.
Si no te sirven del todo, intenta describir el efecto que deseas
conseguir (o envianos un enlace de ejemplo) y veremos como puede realizarse.

Saludos!
Miguel



Melisa Fernández wrote:

Hola de nuevo,
me podrias indicar alguna pagina o algun ejemplo para poder aplicar estilo a
<select> por mas q busco no encuentro gran cosa.

Muchas gracias
Un saludo

"Miguel Gonzalez" escribió en el mensaje
news:
Hola Melisa. El <select> es lo que se llama un control "ventanizado" (es
decir, que hereda las características generales de las ventanas del
sistema operativo). Podrás aplicarle color de fondo, alguna cosa en el
borde, tipo de letra, etc. pero no podrás cambiar la "barrita" de
desplazamiento. En IE sí que se puede, pero no es muy recomendable, dado
que no es un estándar y con toda probabilidad desaparecerá en la próxima
versión del navegador.

Saludos!
Miguel

Melisa Fernández wrote:

Hola a todos,
mi duda es la siguiente se puede aplicar estilo al tag select para

aplicarle

un borde y cambiar el color de la barrirta de desplazamiento?
Muchas gracias, un saludo

Muchas gracias por tu ayuda, un saludo


"Miguel Gonzalez" escribió en el mensaje
news:

Hola Melisa. La referencia oficial en cuanto a CSS (1 y 2.1) la puedes
consultar en:

http://www.w3.org/TR/CSS1
http://www.w3.org/TR/CSS21/

En cuanto a ejemplos, uno sería éste:

En el encabezado de la página (en una hoja CSS externa) defines el
estilo de los elementos que componen el select. Son dos: <select> y

<option>

<style type="text/css">
select{
background-color: #ff0;
width: 200px;
font-family: sans-serif;
font-size: 14pt;
font-weight: bold;
padding: 1em;
margin: 1em;
}
option{
background-color: #ff9;
border-width: 1px;
border-style: solid;
border-color: #f00;
}
</style>

fíjate en que no especifico nada de bordes al <select> ya que es un
control "ventanizado". Al <option> sí que lo especifico, aunque en el IE
no verás los efectos de bordes, al igual que no verás la diferencia de
color entre el <select> y los <option>

Y en el cuerpo de la página pones un <select> de prueba:

<select>
<option value="1">Un camaleón</option>
<option value="2">Dos camaleones</option>
<option value="3">Tres camaleones</option>
<option value="4">Cuatro camaleones</option>
<option value="5">Cinco camaleones</option>
</select>

Es recomendable que compares el resultado con distintos navegadores (no
todos aplican de igual forma las reglas de estilo).

Te he puesto de ejemplo algunas de las reglas de estilo más utilizadas.
Si no te sirven del todo, intenta describir el efecto que deseas
conseguir (o envianos un enlace de ejemplo) y veremos como puede

realizarse.

Saludos!
Miguel



Melisa Fernández wrote:
> Hola de nuevo,
> me podrias indicar alguna pagina o algun ejemplo para poder aplicar

estilo a

> <select> por mas q busco no encuentro gran cosa.
>
> Muchas gracias
> Un saludo
>
> "Miguel Gonzalez" escribió en el mensaje
> news:
> Hola Melisa. El <select> es lo que se llama un control "ventanizado" (es
> decir, que hereda las características generales de las ventanas del
> sistema operativo). Podrás aplicarle color de fondo, alguna cosa en el
> borde, tipo de letra, etc. pero no podrás cambiar la "barrita" de
> desplazamiento. En IE sí que se puede, pero no es muy recomendable, dado
> que no es un estándar y con toda probabilidad desaparecerá en la próxima
> versión del navegador.
>
> Saludos!
> Miguel
>
> Melisa Fernández wrote:
>
>>Hola a todos,
>>mi duda es la siguiente se puede aplicar estilo al tag select para
>
> aplicarle
>
>>un borde y cambiar el color de la barrirta de desplazamiento?
>>Muchas gracias, un saludo
>>
>>
>
>
>

Melisa Fernández escribió:

Hola a todos,
mi duda es la siguiente se puede aplicar estilo al tag select para aplicarle
un borde y cambiar el color de la barrirta de desplazamiento?
Muchas gracias, un saludo

No es posible aplicar estilos a tu gusto al <select>, pero puedes crear
un select personalizado a tu gusto combinando Javascript y CSS. A mi me
llevó 800 líneas de código más o menos.

El asunto es que gracias a Javascript puedes pegar cualquier objeto
creado por tí al objeto window o modificar muchas de las propiedades de
los objetos del navegador.

Entonces, es viable y relativamente sencillo crear un sustituto para el
select.

Se le deben añadir métodos, eventos y propiedades para que se comporte
como una lista desplegable. hay dos caminos, uno: agregar funcionalidad
a un campo de texto. El otro y que fue el que seguí al final tomando el
ejemplo de algún desarrollador en un sitio dedicado a DHTML, consistió
en crear un objeto que incluye entre sus propiedades un campo "text" y
otro "hidden", donde se pone el valor que se enviará al servidor:

Equivalencia

<input type="text" value="VALOR" />
equivale a
<option>VALOR</option>

<input type="hidden" value="VALOR" name="VALOR" />
equivale a
<option value="VALOR">..</option>

Claro que faltan los id y demás yerbas para cambiar los valores.

El paso que sigue consiste en hacer que el objeto despliegue una lista
de selección en un panel oculto con CSS que se mostrará debajo del campo
visible y que al oprimir alguno de sus textos (dentro de un <div>, al
que se le oculta el valor en el title o se le asigna un valor), pondrá
los valores correspondientes en el campo oculto y en el visible y
cerrará la lista.

El elemento <body> y el elemento <html> deben tener pegado un evento que
ascienda (el bubble se comporta diferente en diferentes navegadores) de
forma tal que al hacer click en cualquier parte de la página, la lista
se oculte.

Al hacer este sustituto de select, a mí me interesaba no tanto la
apariencia, como lograr eliminar ese horrible detalle que tienen los
elementos select de los navegadores de elegir las opciones considerando
sólo la primera letra, por ejemplo en una lista de países, cuando eliges
M, aparece Madagascar y si pones E, se recorre hasta Etiopía, eso es un
enorme problema de usabilidad.

Yo buscaba que si ponías ME te llevara a México u otro ejemplo:

P despliega:

Pablo
Paco
Pedro
Pericles
Ponciano

PE despliega:

Pedro
Pericles

PED despliega:

Pedro

y eso no es posible con un select.

Como valor agregado, al tener un objeto así, se puede utilizar CSS para
personalizar, no sólo los bordes, si no además la imagen del botón,
mensajes personalizados y eventos con gran versatilidad.

La parte más difícil, es hacerlo compatible con varios navegadores, DOM
ofrece una buena alternativa, pero IExplorer se resiste a pegar los
eventos con el método de DOM.

Miguel Angel Da Vila