Duda con opción seleccionada

horizzont · #1 (**permalink**) 21/03/2013, 15:05

Hola a todos,

Tengo una lista de opciones y quiero que cuando seleccione una de ellas y acceda a esa opción se quede marcada con otro color, subrayado, etc.

Lo he intentado mediante CSS con :visited o incluso con JQuery pero no hay manera. Seguro que es una tontería.

Mil gracias!!

pzin · #2 (**permalink**) 21/03/2013, 15:28

Conseguir lo que quieres hacer es bastante complejo. Principalmente porque los elementos de un formulario no son enlaces, luego no hay forma de saber si han sido o no visitados mediante CSS. Además, creo que de por sí no es posible estilizar los option, al menos no he visto nunca una solución cross-browser.

Si realmente es algo que necesitas, yo lo que haría sería invertir la idea y crear una lista desordenada con enlaces simulando una lista desplegable usando algo de JavaScript, y así puedes usar sin problemas pseudo-clases —link/visited/hover/active.

horizzont · #3 (**permalink**) 21/03/2013, 15:43

Gracias Bonez, pero creo que no me expliqué nada bien.

Cuando dije lista me refería realmente a un menú de navegación. Es decir, Inicio - Productos - About us - FAQs, etc.

Cuando seleccione una opción y me lleve a otra pantalla, que esa opción aparezca marcada haciéndole saber al usuario que ha accedido a la misma. No sé cómo puedo aplicarle un estilo en cuanto clicke sobre ella...

pzin · #4 (**permalink**) 21/03/2013, 15:50

Ok. Es que "lista de opciones" es más cercano a una lista de formulario en mi cabecita de ajo.

No puedes hacerlo directamente con CSS. La pseudo-clase :visited funciona para un enlace que ha sido visitado. De hecho por eso está en pasado y no en presente.

La forma indirecta de hacerlo es que indiques con una clase extra en tu HTML el enlace que se está visitando y luego haces los cambios necesarios en tu CSS para esa clase.

El problema te surgirá en cómo hacer que en el HTML salga esa clase extra. Y esa es una respuesta para otro foro. Porque ahí tendrás que usar algún lenguaje de lado servidor.

horizzont · #5 (**permalink**) 21/03/2013, 16:13

Cita:

Iniciado por Bonez

Ok. Es que "lista de opciones" es más cercano a una lista de formulario en mi cabecita de ajo.

No puedes hacerlo directamente con CSS. La pseudo-clase :visited funciona para un enlace que ha sido visitado. De hecho por eso está en pasado y no en presente.

La forma indirecta de hacerlo es que indiques con una clase extra en tu HTML el enlace que se está visitando y luego haces los cambios necesarios en tu CSS para esa clase.

El problema te surgirá en cómo hacer que en el HTML salga esa clase extra. Y esa es una respuesta para otro foro. Porque ahí tendrás que usar algún lenguaje de lado servidor.

Ok, gracias. Esa era la idea, hacerlo con una clase extra aplicándole otro estilo pero por JQuery soy incapaz.

Seguiré investigando

nemesis866 · #6 (**permalink**) 21/03/2013, 18:00

Esto podria funcionar, en la etiqueta body colocamos un identificador incioindex, para el index del sitio, y por ejemplo en la pagina de contacto el identificador iniciocontacto.-

Código index.html:

Ver original<style>
#inicioindex #nav1, #iniciocontacto #nav2{estilo...}
</style>
<body id="inicioindex">
<nav>
        <ul>
            <li id="nav1"><a href="index.html">INICIO</a></li>
            <li id="nav2"><a href="contacto.html">Contacto</a></li>
                </ul>
</nav>

Código contacto.html:

Ver original<style>
#inicioindex #nav1, #iniciocontacto #nav2{estilo...}
</style>
<body id="iniciocontacto">
<nav>
        <ul>
            <li id="nav1"><a href="index.html">INICIO</a></li>
            <li id="nav2"><a href="contacto.html">Contacto</a></li>
                </ul>
</nav>

Y asi se seleccionara el enlace en el que estas visitando actualmente, saludos