CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxpadding
Robert James Mieta
Robert James Mieta

Reputation: 193

Firefox desktop and Chrome mobile adding mysterious text input width padding

So Firefox desktop and the Chrome mobile app seem to be rendering web pages with extra padding to text input widths (where Chrome desktop displays them as expected):

Chrome vs Firefox

So far, none of the solutions I've tried from similar Firefox padding issues on StackOverflow thus far seem to resolve this one. Below are Chrome and Firefox inspections of the padding on the text input field (notice how Firefox adds an extra 18.1667 pixels):

Chrome:

Chrome element inspection

Firefox:

Firefox element inpection

The code can be seen below:

:focus
{
    outline: none;
}

.fancy_input_box
{
    text-align: left;
    display: inline-block;
    margin: 40px 3% 1px;
    position: relative;
}

.fancy_input
{
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #aaa;
 
    box-sizing: border-box;

    letter-spacing: 1px;
    border: 0;
    padding: 7px 7px;
    border: 1px solid #ccc;
    position: relative;
    background: transparent;
}

.fancy_input ~ .fancy_label
{
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: #aaa;
    letter-spacing: 0.5px;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;

    z-index: -1;
}

.fancy_input:focus ~ .fancy_label
{
    top: -18px;
    left: 1px;
    font-size: 12px;
    color: white !important;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

.fancy_input:not(focus):valid ~ .fancy_label
{
    top: -18px;
    font-size: 12px;
    left: 1px;
    color: #aaa;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="thing.css">
</head>

<body style="background-color:grey;">
  <div class="fancy_input_box">
    <input class="fancy_input" type="text" placeholder="" maxlength="3" size="5" required>
    <label class="fancy_label">F00</label>
  </div>
</body>
</html>

Upvotes: 1

Views: 455

Answers (1)

Mr Lister
Mr Lister

Reputation: 46539

I don't know if the situation is different on your computer, but on mine, it's a combination of two factors.

Firstly, apparently, the resulting width of an inputs with a size attribute is based on the original font, rather than the font given in the stylesheet. Solution: set the width in the stylesheet too, in ch units.

And the Lato font also seems to cause issues. If I remove that and just use Arial, the result is the same in both browsers.

Hope this helps!

:focus
{
    outline: none;
}

.fancy_input_box
{
    text-align: left;
    display: inline-block;
    margin: 40px 3% 1px;
    position: relative;
}

.fancy_input
{
    font: 15px/24px 'Arial', sans-serif;
    color: #aaa;
 
    box-sizing: border-box;

    letter-spacing: 1px;
    border: 0;
    padding: 7px 7px;
    border: 1px solid #ccc;
    position: relative;
    background: transparent;
    width: 8ch;                  /* new */
}

.fancy_input ~ .fancy_label
{
    position: absolute;
    left: 14px;
    width: 100%;
    top: 10px;
    color: #aaa;
    letter-spacing: 0.5px;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;

    z-index: -1;
}

.fancy_input:focus ~ .fancy_label
{
    top: -18px;
    left: 1px;
    font-size: 12px;
    color: white !important;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

.fancy_input:not(focus):valid ~ .fancy_label
{
    top: -18px;
    font-size: 12px;
    left: 1px;
    color: #aaa;

    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="thing.css">
</head>

<body style="background-color:grey;">
  <div class="fancy_input_box">
    <input class="fancy_input" type="text" placeholder="" maxlength="3" size="5" required>
    <label class="fancy_label">F00</label>
  </div>
</body>
</html>

Upvotes: 2

Related Questions