Reputation: 298

Removing or altering CSS pseudo class in jQuery

A simple enough question, so briefly - is it possible to remove or alter in anyway a CSS pseudo class using jQuery? Or any other Javascript method for that matter

Specifically I want to get rid of :focus on inputs. I can't alter the CSS file directly in any way.

thanks for any help

Buster

Upvotes: 5

Answers (5)

thirtydot

Reputation: 228142

I can't alter the CSS file directly in any way.

Assuming you can only use JavaScript to do this, I can't think of anything better than:

$('head').append('<style>input:focus{background:#fff}</style>');

You will have to individually reset each property. font-weight:normal, color:#000 - whatever you need.

See: http://jsfiddle.net/jqpAu/

Upvotes: 4

Simeon

Reputation: 5579

See this answer: Setting CSS pseudo-class rules from JavaScript

I think you are looking for a way to add CSS dynamically. Example: http://jsfiddle.net/zkMCY/

Code:

var style = '\
    <style type="text/css">\
        a:hover{ color: #a55; }\
    </style>';
$('body').append(style);

Upvotes: 2

Town

Reputation: 14906

Without more specific detail it's hard to answer accurately, but if you want you can just override the :focus style:

// in the CSS file
input:focus {background-color: red;} 

// in your page
input:focus {background-color: inherit;} // overrides with the parent background

Demo

Upvotes: 3