javascript - Removing or altering CSS pseudo class in jQuery - Stack Overflow

admin管理员组

文章数量:1287581

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

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

• javascript
• jquery
• css

Share Improve this question Follow asked Jun 24, 2011 at 10:33 BusterLukeBusterLuke 29822 gold badges44 silver badges1111 bronze badges 5

• you want to getrid of focus event or is it class name? – Vivek Commented Jun 24, 2011 at 10:38
• Do you mean you want to override an existing style that uses pseudo classes? – Matt Gibson Commented Jun 24, 2011 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 Commented Jun 24, 2011 at 10:40
• @Matt - yes override or pletely null the style. Any route in really! – BusterLuke Commented Jun 24, 2011 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, which is similar to yours. – Matt Gibson Commented Jun 24, 2011 at 10:52

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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/jqpAu/

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

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/zkMCY/

Code:

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

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

<input disabled="disabled">

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

本文标签： javascriptRemoving or altering CSS pseudo class in jQueryStack Overflow