Define CSS only for enabled input

Question

How can I define the CSS only for the inputs which are enabled.

I don't want this first solution, because this forces to redefine the enabled style.

input[type="text"] {
        background-color: white;
    }
input[type="text"][disabed] {
        background-color: #ECFFEC;
    }

This CSS3 solution works, but not for IE :

input[type="text"]:enabled {
    background-color: #ECFFEC;
}

I tried also with jQuery solution, but this solution fails with $("input:enabled") is null

$("input:enabled").css("background-color","#ECFFEC");

I would prefer a full CSS solution (or tell me which solution is preferred) ?

Adam Terlson · Accepted Answer · 2011-09-12 13:01:32Z

2

Pure CSS isn't going to work in some of the older browsers, as you've mentioned. The JavaScript that you tried in your 'jQuery solution' should work, though I'd change it to look like this, that way you can just add the CSS in the CSS file and not in your JS (easier to maintain).

$('input:enabled').addClass('foo');

As to why it might be returning null, perhaps you're not executing it on DOM ready?

$(function() {
    $('input:enabled').addClass('foo');
});

answered Sep 12, 2011 at 13:01

Adam Terlson

12.7k4 gold badges46 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jean-Charles Over a year ago

This solution works, but I can't integrate it to my project... I don't know why.

Jose Faeti · Accepted Answer · 2011-09-12 13:02:59Z

1

Just add a class .disabled to the disabled element.

input[type="text"].disabled {
    background:blue;
}

Works in every browser because you don't have to rely on specific selectors.

Check this fiddle.

When you enabled it, you have to remove the class "disabled", and it will get the enabled style.

answered Sep 12, 2011 at 13:02

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

7 Comments

Jean-Charles Over a year ago

the problem is if I add a new attribute to the enabled style, this modify the disabled style too : jsfiddle.net/j3bAc/10. I want to impact only the enabled style...

Jose Faeti Over a year ago

Then simply add class="enabled" to the enabled one :)

Jean-Charles Over a year ago

For sure this works... But I would rather not have to declare a style class on the component... You know what I mean?

Jose Faeti Over a year ago

@Jean there's nothing wrong declaring a class in the element, they are really handy and you will find yourself using them most of the time to style elements dinamically.

Jean-Charles Over a year ago

I understand, and I have a lot of class style. But this is not what I want in this case (because I take an existing application and I do not want to go on all existing components).

|

Jean-Charles · Accepted Answer · 2011-09-13 11:52:48Z

0

The solution is using CSS3 and declare 2 styles, mix between soution 1 and 2 : :enabled:not([readonly]) and [disabled].

input[type="text"]:enabled:not([readonly]){
    background-color: #ECFFEC;
}

input[type="text"][disabled] {
    color: black;
}

the only bad part is that it does not work with IE but there is no need to override CSS attributes : this is the least worst.

Thanks for your tips

answered Sep 13, 2011 at 11:52

Jean-Charles

1,72017 silver badges28 bronze badges

Collectives™ on Stack Overflow

Define CSS only for enabled input

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related