Foros del Web » Creando para Internet » CSS »

Cambiar aspecto label al hacer clic en checkbox

Estas en el tema de Cambiar aspecto label al hacer clic en checkbox en el foro de CSS en Foros del Web. Continuar escribiendo Buenas tardes, cuando haces clic en el checkbox al principio tiene forma de + y cuando esta desplegado el menu aparece un - ...
  #1 (permalink)  
Antiguo 15/02/2019, 09:12
 
Fecha de Ingreso: marzo-2012
Mensajes: 176
Antigüedad: 7 años, 5 meses
Puntos: 2
Cambiar aspecto label al hacer clic en checkbox

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:
Ver original
  1. li input + ol {
  2. background: url(images/toggle-small-expand.png) 40px 0 no-repeat;
  3. margin: -1.600em 0px 8px -44px;
  4. height: 1em;
  5. }
  6. li input:checked + ol {
  7. background: url(images/toggle-small.png) 40px 5px no-repeat;
  8. margin: -1.96em 0 0 -44px;
  9. padding: 1.563em 0 0 80px;
  10. height: auto;
  11. }

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:
Ver original
  1. li label.subfolder2 {
  2. background: url(images/close_folder.png) 15px 1px no-repeat;
  3. cursor: pointer;
  4. display: block;
  5. padding-left: 37px;
  6. }

Se puede hacer?

Saludos
  #2 (permalink)  
Antiguo 15/02/2019, 11:38
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.438
Antigüedad: 11 años, 5 meses
Puntos: 1065
Respuesta: Cambiar aspecto label al hacer clic en checkbox

Si, adelante.
  #3 (permalink)  
Antiguo 15/02/2019, 16:18
 
Fecha de Ingreso: marzo-2012
Mensajes: 176
Antigüedad: 7 años, 5 meses
Puntos: 2
Respuesta: Cambiar aspecto label al hacer clic en checkbox

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

Gracias
  #4 (permalink)  
Antiguo 15/02/2019, 22:59
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.438
Antigüedad: 11 años, 5 meses
Puntos: 1065
Respuesta: Cambiar aspecto label al hacer clic en checkbox

Muestra tu código HTML y tu código CSS con el que has intentado para indicarte tu fallo.
  #5 (permalink)  
Antiguo 18/02/2019, 00:07
 
Fecha de Ingreso: marzo-2012
Mensajes: 176
Antigüedad: 7 años, 5 meses
Puntos: 2
Respuesta: Cambiar aspecto label al hacer clic en checkbox

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:
Ver original
  1. li input:checked + ol > label.subfolder2 {
  2.     background: url(images/open_folder.png) 15px 1px no-repeat;
  3.     cursor: pointer;
  4.     display: block;
  5.     padding-left: 37px;
  6. }

Aqui la lista:
Código CSS:
Ver original
  1. <ol class="tree">
  2.     <li>
  3.         <label class="subfolder2" for="subfolder2">
  4.         <a href="#">Documentación</a></label>
  5.         <input type="checkbox" name="subfolder2">
  6.         <ol class="tree">
  7.             <li>
  8.                 <label class="file" for="file"><a href="FI">FI</a></label>
  9.                 <input type="checkbox" name="file">
  10.             </li>
  11.         </ol>
  12.     </li>
  13. </ol>

Saludos y gracias
  #6 (permalink)  
Antiguo 18/02/2019, 10:19
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.438
Antigüedad: 11 años, 5 meses
Puntos: 1065
Respuesta: Cambiar aspecto label al hacer clic en checkbox

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!
  #7 (permalink)  
Antiguo 19/02/2019, 00:07
 
Fecha de Ingreso: marzo-2012
Mensajes: 176
Antigüedad: 7 años, 5 meses
Puntos: 2
Respuesta: Cambiar aspecto label al hacer clic en checkbox

Vale, gracias lo miro en calma
  #8 (permalink)  
Antiguo 19/02/2019, 07:40
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.023
Antigüedad: 16 años, 5 meses
Puntos: 1820
Respuesta: Cambiar aspecto label al hacer clic en checkbox

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

Código HTML:
Ver original
  1. <label class="subfolder2" for="subfolder2">
  2.    <a href="#">Documentación</a>
  3. <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:
Ver original
  1. <label class="subfolder2" for="subfolder2"></label>
  2. <input type="checkbox" name="subfolder2" id="subfolder2">
  3. <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:
Ver original
  1. <input type="checkbox" name="subfolder2" id="subfolder2">

y usa ese identificador para tu hoja de estilo

Código CSS:
Ver original
  1. #Boton1:checked + div

Última edición por Rafael; 20/02/2019 a las 06:21
  #9 (permalink)  
Antiguo 19/02/2019, 15:43
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.593
Antigüedad: 17 años, 4 meses
Puntos: 1277
Respuesta: Cambiar aspecto label al hacer clic en checkbox

Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 20/02/2019, 06:29
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.023
Antigüedad: 16 años, 5 meses
Puntos: 1820
Respuesta: Cambiar aspecto label al hacer clic en checkbox

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:
Ver original
  1. <input type="checkbox" name="subfolder2" id="subfolder2">
  2. <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:
Ver original
  1. input:checked + ol > label.subfolder2

con

Código CSS:
Ver original
  1. 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.

Etiquetas: aspecto, checkbox, clic, label
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:44.