How to show hidden pseudo-element with JavaScript

Question

I'm using CSS to hide form elements:

#main_form #form-field-email, #form-field-realtor_select { display: none;}
#main_form .elementor-select-wrapper::before { display: none; }

Then JavaScript to show them with:

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';

The problem is with the pseudo-element .elementor-select-wrapper::before which is needed to hide the down arrow in the select element. I need to get the arrow to display using the JavaScript onclick event. I tried document.getElementsByClassName() but that did not work.

You can see the test page here: Test Page. Click First Name or Last Name to reveal fields (more than listed above) and you'll see the down arrow is mission from the select element.

Ross Gatih · Accepted Answer · 2022-02-14 03:52:42Z

1

So, it's not possible to select a pseudo element directly, but you can create a set of CSS styles like the following, which will change the ::before element using a "toggleable" class on the parent:

#main_form .elementor-select-wrapper::before {
    display: none;
}

#main_form .elementor-select-wrapper.show-chevron::before {
    display: block;
}

When you add (or remove) the .show-chevron class to .elementor-select-wrapper, it should toggle the ::before element.

document.getElementsByClassName('elementor-select-wrapper')[0].classList.add('show-chevron')

Let me know if this works! If not, I can take another look

edited Feb 14, 2022 at 3:52

answered Feb 13, 2022 at 2:22

Ross Gatih

6794 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

chris Over a year ago

Hi Ross, I like your creative approach. I added the CSS and JS but the chevron does not seem to appear. Here is the test page - for on the left, click ether field: thereservemammoth.bigidearesults.com/style-sheet

Ross Gatih Over a year ago

Hi Chris, my syntax was off, replace .add with .addClass

chris Over a year ago

Hi Ross, updated JS with .addClass - appears to be same result. See thereservemammoth.bigidearesults.com/style-sheet Let me know if I missed something. Thanks.

Ross Gatih Over a year ago

Ok, so my syntax was off a second time, but I tested this successfully on the site. Try changing .addClass to .classList.add

chris Over a year ago

Success! Thanks, Ross.

lortschi · Accepted Answer · 2023-07-11 10:45:30Z

0

It is possible to edit the css pseudo elements via JS, as the following snippet shows.

    // Create a new style element
    var styleElement = document.createElement("style")
    document.head.appendChild(styleElement)

    // Get the CSSStyleSheet object of the newly created style element
    var styleSheet = styleElement.sheet

    // Add a new rule targeting the :after pseudo-element
    styleSheet.insertRule(".your-class-name:after { display: none; }", 0)

answered Jul 11, 2023 at 10:45

lortschi

4,3932 gold badges21 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to show hidden pseudo-element with JavaScript

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related