3

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!

Piuksu
  • 117
  • 1
  • 8
  • This is a pure guess from a non-iPad-owner - does iOS Chrome include some default styles that include that very Apple-looking rounded button and the gradient? Also, for some reason, I want to get up from my desk and go look for a hot dog stand ;) – Jack Deeth Feb 10 '22 at 18:14
  • https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do – j08691 Feb 10 '22 at 18:18

2 Answers2

1

Different user-agents have different default styles for html elements. Many websites and frameworks start with specially crafted CSS to normalize or reset styles consistently across different browsers and operating systems, and then layer on their own styles afterward.

Try using one of these systems to start from a consistent point across user-agents. Alternatively, you'll need to test on various user-agents and determine which styles need to be overwritten. For instance, it looks like the tablet has a gradient on the button, which you'd need to override using the background property instead of the background-color property.

Sean
  • 6,873
  • 4
  • 21
  • 46
0

I found a solution:

Strange button styling on chrome on iOS

To be used:

-webkit-appearance: none! important;
Piuksu
  • 117
  • 1
  • 8