The submit button appears as grey on IOS when using the input[type="submit"]

Why does the submit input look different on IOS only, and how can this be resolved?

https://i.sstatic.net/UVlKB.png

Thank you in advance

For HTML:

<input class="btn" type="submit" 
             [disabled]=""
             value="ابدأ الان">

For CSS:

.btn {
        height: 4.2rem;
        width: 10.4rem;
        padding: 0;
        border-radius: 6px;
        font-size: 1.5rem;
        margin-right: 1.3rem;
        outline: none;
        font-weight: bold;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        opacity: 1;
        background-color: #032C51;
    }
htmlcss

Answer №1

Resolved by

        background-color: #032C51 !important;
        color: #ffff !important;

Still puzzled as to why this issue is exclusive to iOS devices.

Answer №2

<button class="btn" type="submit" [disabled]="" value="Start Now">

What is the purpose of having [disabled] there? It should only be disabled if you want it to be inactive.

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

Obtain saved browsing history in HTML5 with the use of JavaScript

I'm currently utilizing the History.js library found at https://github.com/browserstate/History.js/ to create an AJAX-based application that leverages the HTML5 History API for dynamically changing the URL and title of the browser. Does anyone have s ...

javascripthtml

Is it possible to utilize the useRef Hook for the purpose of storing and accessing previous state values?

If you have already implemented the useState and useEffect Hooks for maintaining previous state, another approach is to utilize the useRef Hook to track previous state values as well. ...

javascriptjavahtmlcssreactjs

Using a series of identical divs to dynamically update the image URL

Greetings! I am a newcomer to the world of web development and I have decided to hone my skills by creating a small website for my mother! My goal is to replicate a specific div multiple times while changing only the image URL and the heading caption. < ...

javascripthtml

What could be causing the flex item to be wider than its container?

One issue that can arise when utilizing flexbox is the scenario where, as demonstrated below, the content exceeds the width of the viewport causing the flexbox items to become wider than their container. What are the factors contributing to this situat ...

cssflexbox

What is the best way to have an HTML radio button automatically display as selected upon loading if the stored value is "on"?

Utilizing Javascript alongside html: I am facing an issue where a list containing radio buttons is dynamically loaded based on stored data when the page launches. Despite the stored value of the radio being set to "on", the radio button does not show up a ...

javascriptjqueryhtml

Create a JavaScript script within a CSS file

I'm attempting to create this using only CSS: Codepen and I would like to achieve the same effect but solely with CSS. This is what my CSS looks like: .text{ --a: calc(var(--a);*0.82+(1.5-var(--b);)/10); --b: calc(var(--b);+var(--a);); transfor ...

javascriptcss

Acquiring information to display in a div using innerHTML

I aim to create a div that displays different animal sounds, like: Dog says Bark Bark I've attempted various methods but I'm unable to get each pair in the array to show up in a div: const animal = [ {creature: "Dog", sound: "B ...

javascripthtml

PHP updating data in a MySQL database

I've been using easyPHP and encountering issues with updating records in my database. Whenever I try to update, the HTML form displays <?php echo $btitle; ?> and <?php echo $bauthor; ?> instead of updating the data. However, it does print ...

phphtmlmysqldatabase

Retrieving HTML Source Code in Android Studio

I am having trouble with testing this function even though the permissions are correctly set in the manifest file. Can anyone help me figure out what I'm doing wrong? public void fetchHTMLContent() throws Exception { URL url = new URL("http:/ ...

htmlgethttpurlconnection

Utilizing version 4 of Bootstrap to create a visually appealing full

I am currently using the latest version of bootstrap, but I have encountered an issue with my sidebar being too short and not reaching full height. You can view the problem here: Is this problem caused by my CSS or is it a bootstrap issue? And how can ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

The HTML element <a> can have both a href attribute and a onclick attribute

I'm currently facing a challenge with my project - I am trying to create a submenu that includes all sub-pages within a single HTML file. However, whenever I attempt to use both href and onclick, the functionality fails to work as intended. The only ...

javascriptjqueryhtmlcss

Problem with alternating row colors in my table

Trying to add some style to my table on the webpage by alternating row colors, but I'm running into some issues. I've followed tutorials and tried using different CSS selectors like nth-of-type(even), nth-of-type(2n+0), and nth-of-type(odd). Howe ...

htmlcss

Is there a way to determine if a parent of my HTML element possesses a CSS class?

Looking at this HTML code snippet - <div id="parent" class="foo"> <div id="child"> </div> </div> Is there a way to create a test to verify if the child element is utilizing the foo class? I attempted: element .children("#chi ...

javascriptcssangularjsjasminecss-selectors

Struggling to get the fluid image feature to work properly on Bootstrap 4

I seem to be facing an issue with creating responsive images using Bootstrap 4. Whenever I view the code below on a browser, I see three images in the navbar at the top left corner. Unfortunately, these images do not scale down in size when viewed on mobil ...

htmlcssbootstrap-4

How can I add color to arrow icons in tabulator group rows?

Is there a way to specify the color of the arrows in collapsed/expanded group rows? Also, what CSS code should I use to define the font color for column group summaries? You can view an example of what I am trying to customize here: https://jsfiddle.net/s ...

javascriptcsstabulator

The toggle function for the classList ('open') is functioning correctly and can be seen in the inspect element tool, however, the website is not displaying the associated style

How can I make the .nav show styles in .open after clicking #menu-icon? Note: I used Bootstrap to create the nav HTML <!-- logo --> <div class="logo"> <img src="assets/logo.png" alt="logo g's shop& ...

javascripthtmljquerycssbootstrap-4

What could be causing the image file input to appear sideways or flipped?

I am currently working on a Vuejs component that allows users to select a file from their local system. Once the user selects an image, it is previewed in a div. However, I have noticed that some images appear 'flipped' sideways automatically, es ...

javascripthtmlcssvue.jsvuejs2

Transforming the input button into images

I'm new to JavaScript and I'm looking to change the show button and hide button to images instead. The show button image should be different from the hide button image. Can anyone guide me on how to achieve this? Click here for reference $( ...

javascripthtmljquery

Using HTML and CSS to Trigger Animation of Gif (or video) Upon Mouse Hover, Depending on Mouse Position

Is there a way to create an animation for a gif or video that changes based on the position of the mouse relative to the frame? For example, if the gif shows someone turning around 360 degrees, I would like the person to be facing forward when the mouse i ...

htmlcssanimationvideogif

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss