Update CSS of Pseudo Element with jQuery -
i've spotted number of posts stating can't manipulate pseudo element jquery i'm looking workaround?
i'm looking run a/b split test in optimizely on our site search bar. design of current search bar has css creates search icon using ::before pseudo element place glyph-icon button start search.
as test wanted change colour of icon. optimizely allows use jquery target elements , make these types of changes.
the current css looks 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 jquery attempting implement didn't work:
$(".search-button::before").css({'color':'#e93826'});
any appreciated.
try:
$('head').append('<style>.search-button::before{color:#e93826 !important}</style>');
Comments
Post a Comment