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-14T03:52:42.267

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 '22 at 03:52

answered Feb 13 '22 at 02:22

Ross Gatih

649
4
9

1

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: https://thereservemammoth.bigidearesults.com/style-sheet/ – chris Feb 13 '22 at 19:25
Hi Chris, my syntax was off, replace `.add` with `.addClass` – Ross Gatih Feb 13 '22 at 20:03
1

Hi Ross, updated JS with .addClass - appears to be same result. See https://thereservemammoth.bigidearesults.com/style-sheet/ Let me know if I missed something. Thanks. – chris Feb 14 '22 at 00:37
Ok, so my syntax was off a second time, but I tested this successfully on the site. Try changing `.addClass` to `.classList.add` – Ross Gatih Feb 14 '22 at 03:52
1

Success! Thanks, Ross. – chris Feb 14 '22 at 14:23

score 0 · Answer 2 · answered Jul 11 '23 at 10:45

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)

How to show hidden pseudo-element with JavaScript

2 Answers2