Styling a disabled input with css only

Question

I have sort of a strange situation. I'm trying to style a disabled input button because I have an annoying hover turning the text to white. This makes it confusing to the user because its acting like a normal button.

I have tried a few things, mainly css and a few jQuery things. I would like to keep this in css if at all posable.

This is my html, sorry it is in a larvel form helper.

{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }}

and this is what the browser generates

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">

and I was working on something like this

.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{
  color:green
}

Any help would be wonderful!

@Vector Does the text change its color to green if you hover over the button? — ComFreek
– ComFreek, Commented Aug 26, 2013 at 13:43

Community · Accepted Answer · 2017-05-23 12:17:54Z

66

Use this CSS (jsFiddle example):

input:disabled.btn:hover,
input:disabled.btn:active,
input:disabled.btn:focus {
  color: green
}

You have to write the most outer element on the left and the most inner element on the right.

.btn:hover input:disabled would select any disabled input elements contained in an element with a class btn which is currently hovered by the user.

I would prefer :disabled over [disabled], see this question for a discussion: Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

By the way, Laravel (PHP) generates the HTML - not the browser.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Aug 26, 2013 at 13:42

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

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

3 Comments

zazvorniki Over a year ago

Thank you, this worked perfectly for me. Me and my silly spaces! :)

Frank N Over a year ago

Are there any reasons for preference between using [disabled] and :disabled ? (which is also chainable → css-tricks.com/almanac/selectors/d/disabled )

ComFreek Over a year ago

@FrankNocke Indeed, :disabled seems to be more preferable, see my edit.

Community · Accepted Answer · 2015-03-24 21:31:37Z

19

Let's just say you have 3 buttons:

<input type="button" disabled="disabled" value="hello world">
<input type="button" disabled value="hello world">
<input type="button" value="hello world">

To style the disabled button you can use the following css:

input[type="button"]:disabled{
    color:#000;
}

This will only affect the button which is disabled.

To stop the color changing when hovering you can use this too:

input[type="button"]:disabled:hover{
    color:#000;
}

You can also avoid this by using a css-reset.

edited Mar 24, 2015 at 21:31

CommunityBot

11 silver badge

answered Aug 26, 2013 at 13:44

saad arshad

2591 silver badge10 bronze badges

4 Comments

Brigand Over a year ago

Why was this downvoted? It's a perfectly valid solution for modern browsers.

saad arshad Over a year ago

thanks mate. i was about to start thinking that my whole CSS career is a lie :)

ComFreek Over a year ago

@thesaadarshad I just received an upvote on my answer on this question. By accident I also saw your answer, which I downvoted for a reason I can't remember anymore. I made an edit to be able to revert the downvote. +1!

Victor Zakharov Over a year ago

:disabled doesn't seem to work in IE9. [disabled] works.

Cobra_Fast · Accepted Answer · 2013-08-26 13:41:44Z

1

A space in a CSS selector selects child elements.

.btn input

This is basically what you wrote and it would select <input> elements within any element that has the btn class.

I think you're looking for

input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus

This would select <input> elements with the disabled attribute and the btn class in the three different states of hover, active and focus.

answered Aug 26, 2013 at 13:41

Cobra_Fast

16.2k8 gold badges65 silver badges106 bronze badges

Collectives™ on Stack Overflow

Styling a disabled input with css only

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related