How to use :disabled and change the another class behavior - less

Question

I'm using less.

this is my code:

.input-mobile {
      padding-left: 0 !important;
      margin-left: 0 !important;
      width: var(--t1-login-input-width);

      input {
        height: 60px !important;
        padding-left: 0 !important;
        font-size: 18px !important;
      } {
      input:disabled {
        .item-input-wrap:after {
          background-color: yellow;
        }
      }
    }

I want to change background color to yellow (.item-input-wrap:after ) when my input is disabled. but it doesn't work.

Note that `input' elements cannot have pseudo-elements. https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field — Paulie_D, Jun 19 '21 at 09:46

score 0 · Answer 1 · answered Jun 19 '21 at 10:03

.input-mobile {
      padding-left: 0 !important;
      margin-left: 0 !important;
      width: var(--t1-login-input-width);

      input {
        height: 60px !important;
        padding-left: 0 !important;
        font-size: 18px !important;
      
      &:disabled {
        .item-input-wrap:after {
          background-color: yellow;
        }
      }
    }
}

score 0 · Answer 2 · answered Jun 19 '21 at 10:59

An <input> cannot have a nested element, but according to your code, it does. Use some code like this:

.input-mobile{
  position:relative;
  display:inline-block;
}
.item-input-wrap,
.item-input-wrap:after{
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
}
.item-input-wrap:after{
  content:'';
}
input[disabled]~.item-input-wrap:after{
  background-color:#ffa50033;
}

<div class="input-mobile">
  <input disabled>
  <span class="item-input-wrap"></span>
</div>

How to use :disabled and change the another class behavior - less

2 Answers2