Estoy usando CSS para ocultar elementos de formulario:
#main_form #form-field-email, #form-field-realtor_select { display: none;} #main_form .elementor-select-wrapper::before { display: none; }Entonces JavaScript para mostrarlos con:
document.getElementById("form-field-first_name").onclick = function(){ document.getElementById('form-field-email').style.display = 'block'; document.getElementById('form-field-realtor_select').style.display = 'block'; El problema es con el pseudo-elemento .elementor-select-wrapper::before cual se necesita ocultar la flecha hacia abajo en el elemento seleccionado. Necesito que la flecha se muestre usando el evento onclick de JavaScript. Probé document.getElementsByClassName() pero eso no funcionó.
Puede ver la página de prueba aquí: Página de prueba . Haga clic en Nombre o Apellido para revelar campos (más de los enumerados anteriormente) y verá que la flecha hacia abajo es la misión del elemento seleccionado.
Por lo tanto, no es posible seleccionar un pseudo elemento directamente, pero puede crear un conjunto de estilos CSS como el siguiente, que cambiará el elemento ::before usando una clase "conmutable" en el padre:
#main_form .elementor-select-wrapper::before { display: none; } #main_form .elementor-select-wrapper.show-chevron::before { display: block; } Cuando agrega (o elimina) la clase .show-chevron a .elementor-select-wrapper , debe alternar el elemento ::before .
document.getElementsByClassName('elementor-select-wrapper')[0].classList.add('show-chevron')
¡Hazme saber si esto funciona! Si no, puedo echar otro vistazo.