Removing or altering CSS pseudo class in jQuery

Question

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

Do you mean you want to override an existing style that uses pseudo classes? — Matt Gibson, Jun 24 '11 at 10:40
I need to get rid of the event entirely. Unfortunately there is no class name involved, just a straightforward input:focus in the CSS — BusterLuke, Jun 24 '11 at 10:40
@Matt - yes override or completely null the style. Any route in really! — BusterLuke, Jun 24 '11 at 10:42
In that case, I'd use @Town's solution, and do it in pure CSS, including your own stylesheet or inline style *after* the stylesheet you can't change. (Later stylesheet rules override previous stylesheet rules for the same selector. Alternatively, you can override by using a more specific selector, or the `!important` option.) You can also change the stylesheet directly in Javascript; see David's answer to [this question](http://stackoverflow.com/questions/486159/css-pseudo-classes-with-jquery), which is similar to yours. — Matt Gibson, Jun 24 '11 at 10:52

score 4 · Answer 1 · answered Jun 24 '11 at 10:53

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/

score 3 · Answer 2 · answered Jun 24 '11 at 10:44

3

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

answered Jun 24 '11 at 10:44

Town

14,706
3
48
72

3

@fearofawhackplanet Yup; even if he can't edit the provided CSS file, he can certainly override it with his own style, either inline or in his own file. Effectively, this is all any Javascript solution would be doing -- injecting a style to override the original, so if you can do it with pure CSS then that's the cleanest solution. – Matt Gibson Jun 24 '11 at 10:57

score 2 · Answer 3 · edited May 23 '17 at 12:32

2

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);

edited May 23 '17 at 12:32

Community

1
1

answered Jun 24 '11 at 10:52

Simeon

5,519
3
29
51

score -1 · Answer 4 · answered Jun 24 '11 at 10:38

-1

If you want to actually prevent the user from using your input, do that via your html:

<input disabled="disabled">

answered Jun 24 '11 at 10:38

pixeline

17,669
12
84
109

score -2 · Answer 5 · answered Jun 24 '11 at 10:37

-2

you can use $(selector).removeClass(className)

answered Jun 24 '11 at 10:37

Vivek

10,978
14
48
66

Removing or altering CSS pseudo class in jQuery

5 Answers5

Linked