Estoy construyendo mi página de inicio en una plataforma de creación de páginas web como Wix, Wordpress. Pero mi plataforma no admite la importación de archivos css... Usé la etiqueta 'detalles' en mi página de inicio. Pero descubrí que no muestra la flecha en un navegador Chrome, pero en el navegador Safari muestra una flecha. También quiero ocultar flechas en safari.
Así que probé este código.
<details style="list-style:none;"> <summary style="list-style:none;font-size:14px; cursor:pointer;">Open</summary> </details>Pongo 'estilo de lista: ninguno;' pero sigue sin funcionar. Entonces, ¿hay alguna forma de no mostrar flechas sin usar cssfile?
En realidad, la respuesta es muy simple, pero no intuitiva.
usar display: block; en resumen
summary { display: block; } <details> <summary>hello world</summary> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quos exercitationem quis delectus. Nisi, porro! Possimus placeat quasi aliquid, aperiam ex, adipisci fugiat similique, minima autem assumenda quod quis officiis!</p> </details> puede usar el mismo método que ve arriba, con style="display: block;" si su CMS no admite la importación de archivos .css
es solo una propiedad de CSS, por lo que puede hacerlo. (esta es la solución más fácil por ahora)
O veo ahora en Internet, allí puede diseñar este pseudo-elemento ::-webkit-details-marker
todo comienza con 2 dos puntos :: así :: NameOfPsudoElement es pseudo-elemento)
::-webkit-details-marker { display:none; } pero no creo que su CMS admita la carga de un archivo .css externo porque no puede usar el método style="" para los pseudoelementos
pero si su cms admite escribir su propio HTML,
puede anidar el CSS arriba dentro de la etiqueta <style>
¡Así que para mí ve por la primera respuesta!
summary { display: block; } <details> <summary>hello world</summary> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quos exercitationem quis delectus. Nisi, porro! Possimus placeat quasi aliquid, aperiam ex, adipisci fugiat similique, minima autem assumenda quod quis officiis!</p> </details>No puede apuntar a pseudoclases o pseudoelementos en estilo en línea, por lo que la única opción si aún desea escribirlo en un archivo HTML sería así:
<style> summary::-webkit-details-marker { display:none; } </style>