css disable button not working in tablets

user_13126769 0
Viewed 187

-I have a button: -I want to disable it with javascript: document.getElementById("input-datestart").disabled = true; -Css: 

input:disabled {
    background-color: #fff!important;
    color: #000;
}

text color [color: #000;] On my computer's browser it's working, but on tablet, it's not working, please find below the image enter image description here

disable mobile button css javascript
2 Answers

You can use this for multiple OS's.

Make the background and text visible to screen what I observe in your fiddle is it transparent for the users, so feel free to modify a color code to make it consistent across devices and platforms.

document.getElementById("input-datestart").disabled = true;
  input:disabled {
  -webkit-text-fill-color: #880000;
  /* Override iOS / Android font color change */
  -webkit-opacity: 1;
  /* Override iOS opacity change affecting text & background color */
  color: #880000;
  /* Override IE font color change */
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <input value="text value" name="datePlan" id="input-datestart" readonly="" type="text">

</body>

</html>

user_35643590

Please try using webkit prefix along with CSS properties, I hope it's for Android platform

user_29515040
Related