CODEWITHSUNDEEP
css
user8779054
user8779054

Reputation: 183

Hide disabled button using css

I am trying to hide "left-arrow" when it is disabled. However i can't seem to get the CSS right.

[data-tour-elem="left-arrow"] {
    display: none;
}

enter image description here

Upvotes: 0

Views: 198

Answers (1)

ethry
ethry

Reputation: 803

You are using it wrong. You have to use the : selector, not ..

button {
  border: 5px solid lime;
}

button:disabled {
  border: 5px solid aqua;
}
<button>
  Not disabled
</button>

<button disabled>
  Disabled
</button>

<button onclick="this.disabled = true;">
   Click to disable
</button>

This code gives the active buttons a lime border, and the disabled ones an aqua border.

You can learn more about CSS selectors: MDN CSS selectors MDN disabled selector DevDocs disabled selector

Upvotes: 3

Related Questions