How to Style a disable DIV element

Question

I can make an input element respond to :hover and :hover:disable

But looks like a div doesn't respond the same.

.btn {
  width: 99px;
  border-color: 2px #787878;
  background-color: #CACACA;
  margin-left: 76px;
  margin-top: 21px;
  position: relative;
  border-radius: 26px;
  -moz-border-radius: 26px;
  -webkit-border-radius: 26px;
  cursor: pointer;
}
.btn:hover:disabled {
  background: red;
  cursor: no-drop;
}

<div class="btn" id="divDisable" style=" height: 30px;line-height: 30px; text-align: center;" disabled>Disabled
</div>

<input class="btn" id="iDisabled" type="submit" value="Disabled" disabled>

Full Sample with everything i tried

Bonus Info

Question was answer div doesn't have Disable

Make div content Disable

http://jsfiddle.net/WS47f/

I don't think the div is meant to be "disabled", can't you add a "disabled" css class? — Eduardo Wada, Mar 20 '15 at 22:06
@DavidRobinson How is my question duplicated? The duplicate suggestion is regarding an Input element, and as you can see in the accepted answer INPUT have DISABLED property but DIV doesnt. So you need a workaround for that. — Juan Carlos Oropeza, Mar 24 '15 at 15:41

score 2 · Accepted Answer · answered Mar 20 '15 at 22:08

2

A div element doesn't have a disable attribute. You could add a class in this case for your CSS.

div.divDisable:hover {}

answered Mar 20 '15 at 22:08

Cjmarkham

9,484
5
48
81

I will try that, make sense if there isn't disable attribute. I rechange the Title again. The issue isnt disable the DIV. The issue was style a disable DIV. – Juan Carlos Oropeza Mar 20 '15 at 22:17

score 1 · Answer 2 · answered Feb 15 '17 at 12:15

Maybe late for the party, but solution is to use .btn[disabled]:hover instead of .btn:disabled:hover. First one does not detect disabled state (which doesn't exist on div) but rather targets existence of disabled attribute.

.btn {
  width: 99px;
  border-color: 2px #787878;
  background-color: #CACACA;
  margin-left: 76px;
  margin-top: 21px;
  position: relative;
  border-radius: 26px;
  -moz-border-radius: 26px;
  -webkit-border-radius: 26px;
  cursor: pointer;
}
.btn[disabled]:hover {
  background: red;
  cursor: no-drop;
}

<div class="btn" id="divDisable" style=" height: 30px;line-height: 30px; text-align: center;" disabled>Disabled
</div>

<input class="btn" id="iDisabled" type="submit" value="Disabled" disabled>

BlackHatSamurai · Answer 3 · 2015-03-20T22:37:44.920

-1

To get both to do the same thing do:

    .btn:hover {
  background: red;
  cursor: no-drop;
}

Here is a Fiddle that demonstrates: https://jsfiddle.net/cs8rbjkh/

edited Mar 20 '15 at 22:37

answered Mar 20 '15 at 22:10

BlackHatSamurai

23,275
22
95
156

I didnt downvote you. But i try your suggestion and didnt work. Maybe you can submit a fiddle code. – Juan Carlos Oropeza Mar 20 '15 at 22:31
@JuanCarlosOropeza here is the fiddle: https://jsfiddle.net/cs8rbjkh/ Between the accepted answer and mine, they accomplish the same thing, just a different way. – BlackHatSamurai Mar 20 '15 at 22:35

How to Style a disable DIV element

3 Answers3

Linked

Related