Cambiar el color a un option seleccionado con el teclado.

[arianna_rr]

Hola, a todos!

Tengo creada una clase para mis elementos seleccionados, en este caso tengo un select con sus respectivos options, logro asignarle la clase cuando paso el mouse sobre el option, pero no cuando uso las teclas arriba y abajo. La imagen de abajo muestra en azul fuerte la clase que asigno al option cuando el mouse está sobre él, lo que no logro es que esa clase quede encima del estilo por default, o sea, que realmente el option sí agarra la clase cuando me muevo con las teclas pero queda debajo por lo tanto no se ve. Cómo le hago para deshabilitar ese color azul claro por default, o para modificarlo?



Agradezco mucho sus respuestas, ya leí en varios lugares pero ninguno me ha ayudado con el option seleccionado.

Mi estilo es el que tiene Cameroon, el de default es el que tiene Tromelin Island.

[homlyne]

Hola,

Has probado a cambiar el estilo en css de option?

[arianna_rr]

Hola, homlyne, sí, ya lo he probado, lo único que me cambia es el fondo pero cuando no está seleccionado, quizá algo estoy haciendo mal, la verdad ya ando un poco desesperada, tendrás otra idea?

[furoya]

¿Sería mucha molestia un ejemplito de cómo estás aplicando esa clase en un selector HTML?

Digo, si no te jode.

[homlyne]

Conozco dos opciones, no se si habrá más, una de ellas es el uso de css3 jugando con la propiedad:

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

Esto lo que hace es cambiar la apariencia del elemento, pero no funciona en todos los navegadores.

Y la segunda opción es hacer uso de css y javascript en google puedes encontrar ejemplos de como cambiar el estilo a los option con css y javascript. Este si funcionaría en todos los navegadores, debería.

Un saludo.

[arianna_rr]

Hola, gracias por su ayuda, al final terminé desplegando mis datos con input text y dejé de usar select, fue necesario meterle más programación, pero quedó tal cual lo quería.

Además de que el select quedaba terrible en IE por la cuestión de los estilos, no entiendo por qué, si el select tiene un size=1 todo se veía bien, pero yo necesitaba que de entraba se vieran 10 datos, por lo tanto que en el size del select tenía size=10, eso lo imprimo a través de AJAX.

Así que simulo un select con un conjunto de inputs text dentro de un div con overflow:auto para el scroll, mediante javascript detecto las teclas que se pulsan y hago que la clase se posicione en el objeto que deseo y hago que se mueva el scroll para que tenga toda la apariencia de un select, pero con los estilos que necesito, los tamaños que necesito.

[furoya]

Qué lástima que nunca supimos lo que querías. Así tu colaboración no sirve de nada.
Por supuesto que podemos adivinar, y hasta dejar una solución mejor. Pero ya no vale la pena.
Mejor esperamos a alguien que sepa preguntar, por el bien del Foro.

[arianna_rr]

Iniciado por furoya

Qué lástima que nunca supimos lo que querías. Así tu colaboración no sirve de nada.
Por supuesto que podemos adivinar, y hasta dejar una solución mejor. Pero ya no vale la pena.
Mejor esperamos a alguien que sepa preguntar, por el bien del Foro.

En qué parte mi pregunta está mal planteada? Acaso no leíste que pregunté que lo que necesito es saber cómo modificar el color por default que le asigna el navegador al select cuando me muevo sobre los options con las teclas arriba y abajo? Cuando le paso el mouse no tengo problema alguno.

Además en dónde está tu aportación a mi problema?
Qué tiene de malo que le haya dado una solución diferente?
Qué te crees para venir a decirme eso?

Lo que quería está claro, pero tú ya crees que te lo sabes todo y por lo tanto te sientes grande para venir a decir eso.

No crees que alguien que tenga el mismo problema y no consiga modificar ese estilo y empiece a usar otro elemento HTML para hacer una lista desplegable y se encuentre con este post y vea que dije que usé una alternativa al select y necesite(quizá) que le diga cómo hacerlo?

Y le asigné los estilos con

Código Javascript:

<style>
option{
/*propiedades*/
}
</style>
 

y también directamente creando una clase

Código Javascript:

<style>
.clase_option{
/*propiedades*/
}
</style>
 

y luego así:

Código HTML:

<select>
<option class="clase_option">Mi dato 1</option>
</select>
 

Pero simplemente el estilo por default del navegador se anteponía al estilo que yo necesitaba que tuviera el option al estar SELECCIONADO.

En estilos yo no me considero fuerte, pero me sale mejor la programación así que creé mi propia lista desplegabe. Si para ti eso no es ningún aporte(quizá por no postear el código) entonces lo entiendo, de otra forma sólo encuentro despectivo tu comentario.

[furoya]

Justamente. Aquí no estamos para resolverte los problemas, estamos para aportar a la comunidad. Y tu tema no aportó nada. Si hubieses explicado como ponías el formato en las opciones al pasarles el puntero, era un aporte. Pero preferiste poner

Código:

<style>
option{
/*propiedades*/
}
</style>

y venir a hacerte la ofendida.

Hubiese sido un buen tema, si mostrabamos formas de reemplazar o simular un select para salvar esas cuestiones de formato; en cuanto pusieses un ejemplo para empezar a trabajar yo seguía con otras variantes, como para hacer un aporte más.
Ya me estoy hartando de aportar solamente a que aprendan a postear en los foros.

Por otro lado, y ya que esto se queda acá, aclaro para quien busque información que lo de usar input emulando a option está medio fuera de lugar: hay elementos mejores, aunque si el mecanismo de la página exige que unicamente se usen elementos de formulario para el envío de datos ... casi que no hay otra forma. Pero son casos, dependen de cada diseño y programación.
Por eso siempre hay que verlos.

Una lástima, porque si en su momento hubieses puesto el tuyo, seguro lo metías en etiquetas de código, y eso -que debería ser lo común- acá es un mérito. No como muchos que lo mandan suelto en el cuerpo del mensaje, o (¡:!) entre etiquetas de cita.


Y, por supuesto, lo que opine sobre mí alguien que llegó al foro hace menos de 30 días, y que no alcanza ni los 50 mensajes, me tiene sin cuidado.

Si querés saber quién soy, leé mis post. ¿Querés que yo vea los tuyos para saber quién sos?

[arianna_rr]

Le aplico la clase al pasar el mouse sobre el option. Para esto a cada option le pongo:

Código HTML:

<option id="option1" value="Primer dato" onmouseover="change_color('option1');" onmouseout="change_color_inv('option1')">Primer dato</option>
            <option id="option2" value="Segundo dato" onmouseover="change_color('option2');" onmouseout="change_color_inv('option1')">Segundo dato</option>
 

Las clases:

Código HTML:

.box311_occ {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #001146;
    background-color: #FFF;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    height: 18px;
}
.box311_occ1 {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFF;
    background-color: #001146;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    height: 18px;
}
 

Las funciones JS:

Código Javascript:

function change_color(id)
{
var mi_inp=document.getElementById(id);
mi_inp.className="box311_occ1";
document.getElementById('text_occ').value=mi_inp.value;//al pasar el mouse el option se resalta en azul por lo que da la apariencia de seleccionado, de inmediato debo colocar el valor en un input con id=text_occ
}
 
function change_color_inv(id)
{
var mi_inp=document.getElementById(id); 
mi_inp.className="box311_occ";//le regreso el estilo que deben tener los options al no estar seleccionados
}
 

Todo lo anterior trabaja muy bien, mi problema viene cuando se usan las teclas arriba y abajo, porque ahí es cuando el navegador le aplica el estilo por default, mediante JavaScript detecto qué tecla ha sido pulsada y obtengo el id del option para aplicarle la clase, pero resulta que mi clase queda por debajo del estilo que le aplica el navegador. Cuando uso el mouse no hay más problemas porque realmente el option no está seleccionado. Sé que queda por debajo porque si le quito el onmouseout entonces me va dejando cada option seleccionado con la clase box311_occ1, eso a mí me indica que el input sí tomó la clase que yo le asigné al seleccionarlo pero que no la veo porque se antepone la del navegador.

Como los datos que desplego no siempre son una cantidad fija, o sea que varían desde 1 hasta miles, y voy buscando las coincidencias mientras voy tipeando en el input text_occ, mientras las va encontrando voy desplegando esos datos debajo del input dentro de un div, los datos los imprimo con AJAX, y como maximo deben verse 10 datos, entonces si la cantidad de datos excedia de 10 al select le ponía size=10, al hacer esto en IE se le veían bordes a cada option, pero si le ponía size=1 entonces era necesario darle clic(esto es lo que debo evitar) al select para que desplegara los options y entonces se veían bien.

Lo único que yo quería saber era cómo modificar el estilo por default que le asigna el navegador a los inputs, o hacer que lo ignorara porque de todas maneras yo se lo asignaba, pero al ver que los estilos no eran constantes de un navegador a otro en el select cuando el size es mayor que uno, entonces opté por hacerlo de otra manera.

Es cierto que llegué al foro hace menos de un mes, que tengo menos de 50 msjs, y que llevo poco tiempo trabajando en el desarrollo web, pero no vengo aquí a que me resuelvan mis problemas, los problemas los resuelvo yo, tenía una duda con eso, y si no puedo por ese lado entonces continuaré por otro. Este foro lo leo desde hace tiempo, y así como tú te estás hartando de aportar a que se aprenda a postear, a mí me está hartando que los "grandes" salgan con ese tipo de respuestas.

Agradezco el tiempo que se toman en responder y en tratar de ayudar, totalmente agradecida.

No he leído tus demás post, furoya, ya tendré el tiempo y la oportunidad de hacerlo. Si por mi poca experiencia en el foro entonces eres capaz de calificarme como una persona que no merece tu cuidado, lo entiendo. Pero creo que aquí tampoco se trata de ver quién ha hecho más o quién sabe más. Ante todo la actitud.