CODEWITHSUNDEEP
javascripthtmlsemantic-ui
Angus P.
Angus P.

Reputation: 81

Disable button in SemanticUI but don't make it look disabled?

document.getElementById("b1").disabled = true;
body {
  padding: 1em;
}
<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<div class="ui container">
  <button id="b1" class="ui red button">Red</button>
  <button id="b2" class="ui yellow button">Orange</button>
</div>

I have a SemanticUI button and I want to disable the button (so clicking it doesn't do anything) but I don't want to make it faded (the button should look the same enabled or disabled).

Is there an easy way to do this in SemanticUI?

Upvotes: 2

Views: 1961

Answers (2)

charlietfl
charlietfl

Reputation: 171669

There are 3 main differences with the css for :disabled state that you can inspect in dev tools elements inspector

Just overwrite the ones you need to return it to appear normal. Make your selector more specific if you only want a specific button to appear normal

.ui.red.button:disabled {
   opacity:1!important;
   cursor:pointer!important;// not sure if you want these 2
   pointer-events:auto!important;
}

Upvotes: 0

Marco Bonelli
Marco Bonelli

Reputation: 69346

Semantic UI is using this particular CSS rule to make it look faded:

.ui.button:disabled {
    opacity: 0.45 !important;
}

You can just force the button's opacity to be 1:

let btn = document.getElementById("b1");
btn.disabled = true;
btn.style = 'opacity: 1 !important';


let btn = document.getElementById("b1");
btn.disabled = true;
btn.style = 'opacity: 1 !important';
body {
  padding: 1em;
}
<link href="https://semantic-ui.com/dist/semantic.css" rel="stylesheet"/>
<div class="ui container">
  <button id="b1" class="ui red button">Red</button>
  <button id="b2" class="ui yellow button">Orange</button>
</div>

Upvotes: 1

Related Questions