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- gt is locked     disabled    gt   disabled           class    gt   btn btn-blue span3          and this is what the browser generates   lt input disabled  disabled  class  btn btn-blue span3  type  submit  value  Change  gt    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

User · Answer

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.

User · Answer

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

User · Answer

Let s just say you have 3 buttons    lt input type  button  disabled  disabled  value  hello world  gt   lt input type  button  disabled value  hello world  gt   lt input type  button  value  hello world  gt    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

[html] Styling a disabled input with css only

Examples related to html

Examples related to css