Cambiar aspecto label al hacer clic en checkbox

[manelmanel8]

Continuar escribiendo
Buenas tardes,

cuando haces clic en el checkbox al principio tiene forma de + y cuando esta desplegado el menu aparece un -

con el siguiente código:

Código CSS:

li input + ol {
background: url(images/toggle-small-expand.png) 40px 0 no-repeat;
margin: -1.600em 0px 8px -44px;
height: 1em;
}
li input:checked + ol {
background: url(images/toggle-small.png) 40px 5px no-repeat;
margin: -1.96em 0 0 -44px;
padding: 1.563em 0 0 80px;
height: auto;
}
 

Pues me gustaría que al momento que haces clic y esta el menú desplegado y se esta aplicando li input:checked + ol en el siguiente código CSS cambiar el fondo, es decir cambiar close_folder.png por open_folder.png

Código CSS:

li label.subfolder2 {
background: url(images/close_folder.png) 15px 1px no-repeat;
cursor: pointer;
display: block;
padding-left: 37px;
}
 

Se puede hacer?

Saludos

[ArturoGallegos]

Si, adelante.

[manelmanel8]

Hice varias pruebas y no me salio... me ayudas?

Gracias

[ArturoGallegos]

Muestra tu código HTML y tu código CSS con el que has intentado para indicarte tu fallo.

[manelmanel8]

Mira yo intento esto pero no me hace caso:

Es decir al hacer click al input el label del mismo nivel pasa el background de close_folder.png a open_folder.png

Código CSS:

li input:checked + ol > label.subfolder2 {
    background: url(images/open_folder.png) 15px 1px no-repeat;
    cursor: pointer;
    display: block;
    padding-left: 37px;
}
 

Aqui la lista:

Código CSS:

<ol class="tree">
    <li>
        <label class="subfolder2" for="subfolder2">
        <a href="#">Documentación</a></label>
        <input type="checkbox" name="subfolder2">
        <ol class="tree">
            <li>
                <label class="file" for="file"><a href="FI">FI</a></label>
                <input type="checkbox" name="file">
            </li>
        </ol>
    </li>
</ol>
 

Saludos y gracias

[ArturoGallegos]

viendo tu código considero que la mejor forma de ayudarte es remitirte a libros sobre CSS

Tu error es que no conoces o no te queda claro el uso y significado de los selectores que has intentado aplicar, te dejo este enlace, revisa el apartado de selectores.

https://uniwebsidad.com/libros/css

Si sigue sin quedar claro puedes buscar mas información en google, busca -> selectores CSS, o selectores avanzados CSS


Con la estructura actual de tu HTML no es posible hacer lo que buscas, deberás acudir a javascript o mejor a un reestructurarlo una vez que comprendas el uso de los selectores.

Saludos!

[manelmanel8]

Vale, gracias lo miro en calma

[Rafael]

Yo te comento acerca de la estructura base de lo que estás haciendo.

Código HTML:

<label class="subfolder2" for="subfolder2">
   <a href="#">Documentación</a>
</label>
<input type="checkbox" name="subfolder2" id="subfolder2">
 

Esto no tiene sentido.
Un label está asociado con tu checkbox. No hay razón de poner un link dentro si lo que debe de hacer el label es activar el checkbox.

Una mejor estructura es

Código HTML:

<label class="subfolder2" for="subfolder2"></label>
<input type="checkbox" name="subfolder2" id="subfolder2">
<div></div>
 

Y ya podrás hacerle cosas al div que sigue después de tu checkbox.

En cuanto al uso de clases... bueno yo no uso class-itis, o sea yo no hago class particulares, en ese sentido mejor usa id. Independientemente de eso yo dejaría subfolder2 para darle estilo al label, no para identificarlo.

En dado caso ponle un class al checkbox o un id:

Código HTML:

<input type="checkbox" name="subfolder2" id="subfolder2">
 

y usa ese identificador para tu hoja de estilo

Código CSS:

#Boton1:checked + div
 

[caricatos]

Hola:

En html "de siempre", el for debe asociarse a un id y no a un nombre (name).

Saludos

[Rafael]

Cierto. Corregido.

Pero re-leyendo el título del post... "Cambiar aspecto label al hacer clic en checkbox"

Me perdí con tanto css. La estructura es simplemente:

Código HTML:

<input type="checkbox" name="subfolder2" id="subfolder2">
<label class="subfolder2" for="subfolder2"></label>
 

O sea, el label lo puedes tener vacío pero después del input.

Así te ahorras todo esto:

Código CSS:

input:checked + ol > label.subfolder2
 

con

Código CSS:

input:checked + label.subfolder2
 

Es una buena práctica no darle taaaaanta especificidad a un elemento, ya que luego lo "bloqueas" para recibir otros cambios en el CSS.