如何使用 :disabled 并更改另一个类的行为 - 少

问题描述

我用得很少。

这是我的代码：

.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;
        }
      }
    }

当我的输入被禁用时，我想将背景颜色更改为黄色 (.item-input-wrap:after )。 但它不起作用。

解决方法

.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;
        }
      }
    }
}

,

<input> 不能有嵌套元素，但根据您的代码，它可以。使用一些这样的代码：

.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>