cup_of cup_of - 2 months ago 6
HTML Question

How to edit a pseudo element on focus using css or jQuery

Hello I would like to remove a pseudo

:after
element when an input field is clicked. I know that I should use
:focus
but some reason I cant get it to work.

Here is the HTML:

<li id="field_1_1">
<div class="ginput_container">
<input name="input_1" id="input_1_1" type="text">
::after
</div>
</li>


The
:after
element is caused by this css:

#field_1_1 .ginput_container_text:after {
content: "\25CF";
position: absolute;
}


My goal is to remove this
:after
element when a user clicks on the input field. I have tried CSS and jQuery and I couldn't get either to work.

Here is what I tried using CSS:

#footer-form #input_1_1:focus #field_1_1 .ginput_container_text:after {
display: none;
}


And here is what I tried using jQuery:

jQuery("#field_1_1").click(function(){
jQuery("#field_1_1 .ginput_container_text:after").remove();
});


Does anyone have any suggestions?

Thanks

Answer

You cannot modify a pseudo element in jQuery. Your best option is to modify that pseudo element in CSS with an additional class indicating the element's alternate state and then simply remove or add that class in jQuery.

For example,

#field_1_1 .ginput_container_text:after {
    content: "\25CF";
    position: absolute;
}
#field_1_1.clicked .ginput_container_text:after {
    display:none;
}

and

jQuery("#field_1_1").click(function(){
    this.addClass('clicked');
});
Comments