'Why does my tablet display the button differently than it does on my computer?

Why does my tablet display the button differently than it does on my computer?

Code:

<!DOCTYPE HTML>
<html>
    <head>
        <style>
            body {
                background-color: yellow;
                font-family: monospace;
                margin: 0px 0px;
            }
            h1 {
                text-align: center;
            }
            input[type=number] {
                width: 100%;
                padding: 10px 0px;
                font-size: 20px;
                background-color: #f50;
                border: none;
                text-align: center;
                border-radius: 40px;
                outline: none;
                -moz-appearance: textfield;
            }
            input[type=number]:focus {
                background-color: #f70;
            }
            input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
            input[type=submit] {
                width: 50%;
                margin-left: auto;
                margin-right: auto;
                display: block;
                background-color: #f00;
                padding: 5px;
                font-size: 20px;
                outline: none;
                border: none;
                border-radius: 5px;
                color: white;
            }
        </style>
    </head>
    <body>
        <h1>ENTER CODE</h1>
        <form action="topage.php" method="post">
            <input name="code" type="number" oninput="this.value = this.value.slice(0, 8);">
            <br><br>
            <input type="submit" value="SUBMIT">
        </form>
    </body>
</html>

Website in my tablet:

TABLET

Website in my computer: COMPUTER

Ma tahan et tahvelarvutis näeks see samasugune välja kui arvutis.

Both screenshots are made in Chrome, my computer is linux and the tablet is an iPad.

Thank you very much to all the respondents!

htmlcss


Solution 1:[1]

I found a solution:

Strange button styling on chrome on iOS

To be used:

-webkit-appearance: none! important;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Piuksu

Related Questions