0

Tengo un fragmento en react similar a este:

<div className='menu-options pt-4'>
   <li>
      <Link color="primary" id="appointments" className='dropdown-link' role='button' to=''>
        <i className='fas fa-calendar-alt icon-danger'></i>
        Turnos 
        <i className='fas fa-angle-right float-right pt-1'></i>
      </Link>
    </li>
    <UncontrolledCollapse toggler="#appointments">
      <li ><Link to='/profile'><i className='fas fa-address-card icon-orange ml-4'></i>Crear Turno</Link></li>
      <li><Link to='/profile'><i className='fas fa-project-diagram icon-danger ml-4'></i>Bucar Turnos</Link></li>
      <li><Link to='/profile'><i className='fas fa-blog icon-info ml-4' ></i>Otro Menú</Link></li>
    </UncontrolledCollapse>
  </ul>    
</div>

Y estoy tratando de rotar el icono fa-angle-right al abrir el dropdown con el siguiente CSS

.menu-options .dropdown-link i.fa-angle-right::before {
   transform: rotate(0deg);
   display: inline-block;
 }


.menu-options .dropdown-link:active i.fa-angle-right::before {
   transform: rotate(90deg);
   display: inline-block;
 }

El tema es que la clase active, como bien dice su documentacion, desaparece al soltar el click. Existe alguna pseudoclase o pseudoelemento capaz de simular un "check" en un elemento de CSS? Es decir, algo similar a que quede activado con el primer click, y se desactive con el segundo

Nota: Puedo hacer esto con JS o directamente con Hooks (de hecho ya lo hice asi y anda), pero quiero implementarlo con CSS. Alguna sugerencia?

2
  • 1
    fijate la versión con checkbox oculto es.stackoverflow.com/a/215057/81450 a ver si te sirve el 4 dic. 2020 a las 19:46
  • justo ayer hice una consulta similar y llegue a esa respuesta (A esta para ser exacto: stackoverflow.com/questions/13630229/… FIJATE QUE LA SEGUNDA RESPUESTA, QUE SIRVE PARA 2020 ES ESO QUE ME PLANTEAS) y si lo hago con html y css puro anda de maravillas. Ahora, si en el contenido del Label en lugar de texto plano, le paso lo que necesito (Que es una etiqueta HTML, estoy usando Link de reactstrap pero probe con <a>, <p>, <div>, <span> y <button>) el label deja de funcionar y ya no checkea el checkbox. Muchas gracias de todas maneras.
    – Agustin G.
    el 4 dic. 2020 a las 20:25

0

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

Examina otras preguntas con la etiqueta o formula tu propia pregunta.