Vue项目中如何在输入框变为disabled状态时修改其背景色

你的SCSS选择器写法错误，导致样式没有命中禁用状态的输入框本身：
当前你在input选择器内部嵌套[disabled]，经过SCSS编译后生成的CSS选择器是input [disabled]，语义是「选中input元素内部所有带有disabled属性的子元素」，显然你的目标是选中本身带有disabled属性的input元素，所以需要用SCSS父选择器标识符&来关联上层选择器。

方案1：修正SCSS写法（最简便） #

直接修改你的SCSS代码即可生效：

.form {
  width: 100%;
  padding: 15px 15px 0;
  margin: 0 auto;
  text-align: center;
  
  .checkbox_sso{
    width: 24px;
    height: 24px;
    margin: 0px 5px 0px 0px;
  }
  p {
    font-size: 12px;
    color: nth($gray, 5);
    margin-bottom: 5px;
    text-align: left;
  }
  input {
    width: 100%;
    height: 46px;
    margin-bottom: 20px;
    color: nth($gray, 2);
    // 用&指代当前的input选择器，编译后生成 input[disabled]
    &[disabled] {
      background-color: burlywood;
      // 如果还有浏览器默认样式覆盖问题，可以加!important强制生效
      // background-color: burlywood !important;
    }
  }
}

方案2：Vue动态绑定class（可选，灵活性更高） #

如果后续需要更多状态切换的样式控制，可以直接通过sso变量动态绑定class：
首先修改模板部分的密码输入框代码：

<input 
  type="password" 
  v-model="password" 
  @keyup.enter="submit" 
  :disabled="sso == 1"
  :class="{'disabled-input': sso == 1}"
/>

然后在SCSS中添加对应类的样式：

input {
  /* 原有input样式 */
  &.disabled-input {
    background-color: burlywood;
  }
}

内容的提问来源于stack exchange，提问作者niddddddfier