How can I change the appearance of a disabled input button in the iOS browser to not be grey?

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

Answer №1

Issue resolved!

simply adjust the opacity to 1

input:disabled {
   -webkit-appearance: none;
   opacity:1;
}

Answer №2

Are you looking to keep the disabled button's color as white? One solution is to add the following code snippet:

input:-webkit-autofill {
   background-color: white !important;
}

The use of the important tag will ensure that the background remains white.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the depths of an iPad SplitViewController: Navigating through each layer to

For my project, I customized the standard iPad SplitViewerController template by implementing recursive drill down navigation to multiple levels. Here's how I did it: First, I created a new view controller called NavItemController that I added to the ...

Is there a way to conceal every element tag with just a single id name?

I am attempting to conceal specific tags by utilizing a single ID element, but it appears that it only hides the first tag associated with the ID element I used. Here is a demonstration: http://jsfiddle.net/mgm3j5cd/ How can I resolve this problem? I wan ...

What is the best way to change the orientation of the Product List in WooCommerce to landscape

Is there a way to change our product list display to landscape orientation? The current portrait layout is not visually appealing due to excessive white space. I would greatly appreciate any guidance on how to resolve this issue. You can view our website ...

Ways to adjust a specific div within an ng repeat using the value from JSON in AngularJS

When I select a different option from the dropdown menu, such as cities or states, the values are populated from a JSON file. My specific requirement is to hide a button only when the value 'No data' is populated upon changing the dropdown select ...

Creating adaptive row heights in SwiftUI using LazyVGrid

I am looking to create a LazyVGrid with rows of equal height that expand and shrink to fit the available parent height. Is this achievable? let columns = Array(repeating: GridItem(.flexible(minimum: 50, maximum: 100)), count: 3) LazyVGrid(columns: columns, ...

Having trouble with CSS values not being applied to dynamically injected HTML div elements in Angular 4?

Link to Codepen My Angular calendar application runs smoothly without any errors. However, I am encountering an issue where the CSS styles are not being applied to the page. When I implemented this separately, everything worked fine. But as soon as I inc ...

The functionality of the Bootstrap navbar-fixed-top seems to be malfunctioning

I am currently working on creating a page layout with a fixed navigation bar positioned at the top. I am aiming for a design similar to the one showcased here. Upon examining the example linked above, it appears that the content of the page begins below t ...

Adjust the height of each table's data cell dynamically based on the content within

I have a table in HTML with a cell that contains 2 divs and a radial tab strip. Here is an example: <td> First td </td> <td> Second td <div> .... <div style="border: solid; border-color: brown; border-width: 3px; he ...

What is the process for displaying a JSON element within an HTML component in a Bootstrap modal?

My application is developed using CodeIgniter, and now I am looking to manipulate data using AJAX in jQuery. How can I display JSON elements within an HTML element in a Bootstrap modal? Here is the HTML and jQuery code: <td class="center"> < ...

The ambiguity of the 'DataRequest' expression type in Swift can be clarified with more context

I am encountering an error with Alamofire while making a request in this function. Any assistance would be greatly appreciated. Thank you in advance. The expression type 'DataRequest' is ambiguous without more context. func report(_ track: ...

Is it true that eliminating white spaces can enhance a website's loading speed?

I'm curious about something. Can removing white space actually make a website load faster? For instance, take a look at the following CSS snippet - body{ overflow-wrap:break-word; word-break:break-word; word-wrap:break-word } .hidden{ display:none } . ...

Unleashing the Power of Wildcards in HTML with XPath

When using XPath to extract values from DOM elements, I've encountered inconsistent XPaths. To select all DOM elements on the same level, I've resorted to some wildcard magic. For instance, in an HTML document, my XPaths may look like: //div[@i ...

What could be the reason for the lack of update in the return value?

I received a json object and am trying to parse its fields to update a header field (h1) that is not updating, and I can't figure out why? On the server side, the code looks like this: var express = require('express'); var app = ...

Convert a linear gradient into an object

Can someone help me convert the linear-gradient value into an object with keys and values? Here is the initial value: linear-gradient(10deg,#111,rgba(111,111,11,0.4),rgba(255,255,25,0.1)) I would like it to be structured like this: linear-gradient: { ...

What are some ways to avoid an image looking faded when adding it to the scene background in Three.js?

I've been experimenting with loading images onto the scene background using the TextureLoader() class to prevent them from appearing greyed out. Following a tutorial on three.js https://www.youtube.com/watch?v=xJAfLdUgdc4&list=PLjcjAqAnHd1EIxV4FS ...

Is utilizing fixed-top/fixed-bottom with inner div elements set to a fixed height the most effective strategy?

I am working on developing an app similar to stackoverflow, with fixed menu and footer panels and an inner div that creates browser scroll as needed. I'm wondering if the code below is correct for achieving this setup. The classes fixed-top/fixed-bot ...

Experiencing issues with nested jQuery submit functions not triggering

I'm attempting to use AJAX to submit a form once a user has clicked on an image element. HTML <img class="remove_subscription" id="remove_mobile_id_<?php echo get_the_ID(); ?>" src="<?php echo get_bloginfo('template_director ...

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

Java Function for Cleaning HTML Id Attributes

Looking for a more elegant solution to sanitize HTML ID attributes? /** * * HTML 4 Specification * ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number * of letters, digits ([0-9]), hyphens ("-"), underscores (" ...

You are unable to choose more than one file at a time for

Currently, I am in the process of developing an application using HTML, CSS, and JS by following a tutorial. The main purpose of this app is to merge multiple PDF files together. However, I have encountered an issue where I am unable to select multiple fil ...