When it comes to HTML buttons with the input type set to disabled, I noticed that on iPhone devices they appear grey by default. However, I prefer for them to maintain the same style even when disabled. Is there a way to achieve this?
I attempted using "-webkit-appearance: none;" in my CSS, but this caused all input type buttons to change their appearance except for the disabled ones, which remained grey regardless. I even tried explicitly setting the background-color to white for disabled inputs.
<style>
input{
display: block;
-webkit-appearance: none;
margin: 5px;
border: 2px solid #000;
background-color: white;
}
input:disabled{
display: block;
border: 2px solid #000;
webkit-appearance: none;
background-color: white;
}
</style>
<body>
<input id="button1" type="button" disabled>
</body>
My goal is to have iPhones use the custom style I have defined. Here is how it currently appears on iPhone: https://i.sstatic.net/Tj071.jpg. And here is how it looks on PC/Android: https://i.sstatic.net/ZXJhv.jpg