Input text greys out on mobile ( not on desktop) with disabled property-CodePudding

I have an input text that for functionality reasons, everytime a click is made on a button, I have to add the property disabled with the aid of javascript, such as the following:

<input value="1" readonly="" name="input-id-1234" disabled="" hidden="true">

This property is causing the text/value on the input to go grey on mobile.

    input {
      border: none;
      text-align: center;
      width: 20px;
    }
    input:disabled {
      -webkit-appearance: none !important;
      opacity: 2 !important;
      color: black !important;
    }
    input:focus {
      outline: none;
    }

<div>
<input  value="1" readonly="" name="input-id-1234" disabled="true">
</div>

This was supposed to work but it is not working on mobile.

Any ideas on how to override the browser disabled property color ( grey out) ?

CodePudding user response：

Ended up fixing it, fix was the following:

.input {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: black !important;
  &:disabled {
    color: black;
    -webkit-text-fill-color: currentColor;
  }
}
.input:disabled {
  -webkit-appearance: none !important;
  opacity: 1 !important;
  color: black !important;
  -webkit-text-fill-color: black !important;
}
input {
  border: none;
  text-align: center;
  width: 20px;
  color: black;
}
input:focus {
  outline: none;
}

CodePudding user response：

If you want to update the background color or text color of a disabled input with your "input" class name, you can simply use the following

.input:disabled {
  color: black; // Text color
  background-color: red; // Background color
}

If you want to change the text color of the disabled input placeholder text, you can use

.input:disabled::placeholder {
  color: red;
}