Test Foro de elhacker.net SMF 2.1

Programación => Desarrollo Web => Mensaje iniciado por: luchi en 1 Abril 2015, 01:48 AM

Título: [Resuelto] Colorear sólo los puntos de un "<ul>"
Publicado por: luchi en 1 Abril 2015, 01:48 AM
Hola a todos.
si yo tengo una lista, por ejemplo:
Código (html4strict) [Seleccionar]

<div id="elementos">
<ul>
   <li>Elemento 1</li>
   <li>Elemento 2</li>
</ul>
</div>

¿Cómo se colorearían sólo los puntos de la lista con CSS? Sólo los puntos, no el texto.
Gracias.
Título: Re: Colorear sólo los puntos de un "<ul>"
Publicado por: exploiterstack en 1 Abril 2015, 08:40 AM
Hola que tal luchi,

Me temo que no vas a poder cambiar únicamente el color de los puntos sin que ello quede afectado el color del texto(ya que lo cogería igual)...

Luego a partir de ahí puedes hacer algún que otro truco:

1.    Añadir una imagen como punto en la lista.
2.    Crear un &bull; personalizado.
3.    (La opción mas recomendada) envolver el texto del ítem con una etiqueta span, de modo que aplicas dos reglas: una para el li y otra para el span dentro del li, ejemplo:

Código CSS:

Código (css) [Seleccionar]

<style type="text/css">
li{
       color: #ff6600;
}
li span{
color: blue;
}
</style>


Código HTML:

Código (html4strict) [Seleccionar]

<div id="elementos">
<ul>
<li><span>Elemento 1</span></li>
<li><span>Elemento 2</span></li>
<li><span>Elemento 3</span></li>
<li><span>Elemento 4</span></li>
<li><span>Elemento 5</span></li>
</ul>


Espero haberte ayudado, un saludo! ;)
Título: Re: Colorear sólo los puntos de un "<ul>"
Publicado por: Usuario Invitado en 1 Abril 2015, 14:33 PM
Como te dijo exploiterstack, si deseas cambiarle el color a las "bullets" o viñetas, debes de introducir otro elemento dentro de li, ya que es al li al que le asignas un color.cPuedes ver el demo en éste JsFiddle (http://jsfiddle.net/5xutnkq7/1/).


Saludos.
Título: Re: Colorear sólo los puntos de un "<ul>"
Publicado por: luchi en 2 Abril 2015, 22:46 PM
Gracias a los dos. Solucionado.