Search code examples
javascriptcssbuttonmobiledisable

css disable button not working in tablets

-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

Solution

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