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!
you can disable via css: pointer-events: none; Doesn't work everywhere though. Text input can still be tabbed into.
You can't style a disabled checkbox directly because it's controlled by the browser / OS. However you can be clever and replace the checkbox with a label that simulates a checkbox using pure CSS. You need to have an adjacent label that you can use to style a new "pseudo checkbox".
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With