Vue: How to change the background color of an input box when it is changed to disabled-CodePudding

I tried like this. As I know [disabled] in css meant of <disabled = 'disabled'> in javascript, but it didn't work on my vue project. If I click checkbox then the password input box changed to disabled. But it isn't changed of the color to burlywood

If I want to change the background color of input box by checking state of a checkbox, then how can I code a source that it will happen?

vue :

<div class="form">
  <p>ID</p>
  <input type="text" v-model="account" @keyup.enter="submit" />
  <p>Password</p>
  <input type="password" v-model="password" @keyup.enter="submit" :disabled="sso == 1"/>
  <div>
  <input
    class="checkbox_sso"
    type="checkbox"
    v-model="sso"
    true-value="1"
    false-value="0" />SSO authentication login
  </div>
</div>

...

export default {
  data() {
    return {
      visible: true,
      account: '',
      password: '',
      sso: '',
    }
  },
  computed: {
    ...mapState('store', { logo: (state) => state.logo }),

  },

...

}

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 {
      [disabled] {
        background-color: burlywood;
      }
      width: 100%;
      height: 46px;
      margin-bottom: 20px;
      color: nth($gray, 2);
    
    }
  }

CodePudding user response：

Your scss is incorrect. The css output will be input [disabled] whereas you need input[disabled].

Note: you should beware nesting in scss where it provides little value and makes your code unnecessarily complicated.

  .form {

    input {
      width: 100%;
      height: 46px;
      margin-bottom: 20px;
      color: nth($gray, 2);
    }

    input[disabled] {
      background-color: burlywood;
    }
  }