Valores de texto para la propiedad de CSS de tipo de tipo de lista, ¿cómo?

Me gustaría personalizar la forma en que se presentan los elementos de listas desordenadas.Valores de texto para la propiedad de CSS de tipo de tipo de lista, ¿cómo?

Sé que puedo utilizar para cambiar entre list-style-typenone, disc, circle, square y otros valores más o menos compatibles. También sé que es posible cambiar la apariencia predeterminada de los marcadores de lista que especifican una imagen en la propiedad list-style-image.

El problema es que quiero reemplazar la bala con large right arrow (►, ►) caracteres HTML especial en lugar de utilizar una combinación de list-style-image y una imagen triangular.

¿Es posible? Por cierto, si esto importa, jQuery ya está cargado en la página, por lo que no sería un problema usarlo si esto puede ayudar.

Gracias.

- EDITAR -

Gracias, voy a usar una versión o la otra dependiendo del navegador que se requiere para apoyar. Por cierto, ambas respuestas son geniales y tener que decidir cuál es el "ganador" no es fácil, así que opté por la respuesta dada primero.

Fuente

2011-04-11 Paolo

Que yo sepa, no es posible hacer que el uso de la propiedad list-style-type.

Sin embargo, si su navegador admite el selector CSS :before, puede usarlo para insertar las entidades de viñeta antes de los elementos de la lista. Sólo es necesario para convertir el código de entidad a hexadecimal:

ul { 
    list-style-type: none; 
} 

li:before { 
    content: "\25ba\00a0"; 
}

se puede encontrar una jsFiddle demostrar esto here.

Fuente

2011-04-11 09:18:00

Estaba trabajando en algo similar. No me molestaré en publicar una respuesta ahora, aquí es donde llegué a: http://jsfiddle.net/thirtydot/ZTKuS/ – thirtydot

+1 me gano, se puede encontrar una útil calculadora de conversión para esas entidades [aquí] (http://www.evotech.net/articles/testjsentities.html) – clairesuzy

+1 esto no funcionará en [IE6 y 7] (http://www.quirksmode.org/css/contents.html) pero si eso no es una necesidad, es una solución muy buena. –

@Frederic muestra una solución interesante que yo usaría, a menos que tenga que soportar IE6 y 7 - en ese caso, tendría que trabajar con un elemento HTML normal que contiene el carácter, y que su estilo para ponerlo en el lugar correcto.

Algo así como

ul { list-style-type: none } /* Adjust margin and padding as you see fit */ 
ul li div.bullet { float: left; width: 30px; margin-right: 12px } 

<li> 
<div class="bullet">&#9658;</div> 
List item 1 
</li>

Fuente

2011-04-11 09:11:46

Si se utiliza el método :before para obtener su lista de estilo pensar en añadir un acolchado a la lista y un margen negativo a la lista de elementos para conseguir el mismo espacio al salto de línea:

ul { 
    list-style: none; 
    padding: 0 0 0 24px 
} 
ul > li:before { 
    content: '\25BA'; 
    float: left; 
    margin-left: -24px 
}

Solo use el ejemplo postet de thirtydot para probar en jsfiddle

Fuente

2014-05-12 20:16:09

Valores de texto para la propiedad de CSS de tipo de tipo de lista, ¿cómo?

Respuesta

Cuestiones relacionadas