How to override the styling on the arrow of dropdown when disabled?


I have this markup, basically directly from the documentation.

  <div id="take-action" class="ui red buttons">
    <div class="ui button">Take Action</div>
    <div id="take-action-arrow" class="ui floating dropdown icon button" [ngClass]="{disabled:this.countOfCheckedRows === 0}">
      <i id="take-action-arrow-icon" class="dropdown icon"  [ngClass]="{disabled:this.countOfCheckedRows === 0}"></i>
      <div class="menu">
        <div class="item"><i class="edit icon"></i> Assign</div>
        <div class="item"><i class="delete icon"></i> Deny</div>
        <div class="item"><i class="hide icon"></i> Resubmit</div>

I can style the enabled dropdown using #take-action .button, and I can style the button part of the dropdown when it is disabled using #take-action .button.disabled. But the arrow part remains unstyled. Looking at semantic.css, it seems that the ::selection pseudo class is involved, but I can’t seem to get past that point.

How can I style the arrow part of the dropdown in the disabled state?

                  Regards, Rick


After much work, I discovered that the problem was on our side, not Semantic’s. Some previous programmer had said background-color: green !important;

What’s the procedure here? Nobody else is likely to benefit from my question and answer. It was a local problem. Shall I delete the question?

               Regards, Rick