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.
Try:
$('head').append('<style>.search-button::before{color:#E93826 !important}</style>');
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments