CODEWITHSUNDEEP
jquerycsspseudo-element
bbacarat
bbacarat

Reputation: 253

Update CSS of Pseudo Element with jQuery

I've spotted a number of posts stating that I can't manipulate a Pseudo Element with jQuery so I'm looking for a workaround?

I'm looking to run a a/b split test in Optimizely on our site search bar. The design of the current search bar has css that creates the search icon using the ::before Pseudo element to place a glyph-icon as a button to start the search.

As my test I wanted to change the colour of this icon. Optimizely allows you to use jQuery to target elements and make these types of changes.

The current css looks like this:

.header .form-search button:before, .header .form-search .search- button:before {
content: "\f002";
font-family: "polar-icons";
color: #237cb2;
font-size: 1.8rem;
}

This was the jQuery I was attempting to implement but it didn't work:

$(".search-button::before").css({'color':'#E93826'});

Any help greatly appreciated.

Upvotes: 0

Views: 246

Answers (1)

Ferrmolina
Ferrmolina

Reputation: 2771

Try:

$('head').append('<style>.search-button::before{color:#E93826 !important}</style>');

Upvotes: 1

Related Questions