HTML 5 Doctype Textfield larger than given width

Question

HTML 5 Doctype Textfield larger than given width

40 views Asked by user3668758 At 18 January 2019 at 08:56

When I use <!DOCTYPE html> my textfield is larger (about 257px instead of 250px). Does anyone have any idea why this would be? I couldn't find anything online.

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>

    <body>
        <form>
            <input type='text' style="width:250px">
            <div style='width:250px;background-color:#00FF00'>&nbsp;</div>
        </form>
    </body>
</html>

Thanks in advance!

Original Q&A

There are 2 answers

Lau Bloch Rasmussen On 18 January 2019 at 09:13

That is the browsers default styling, from chrome dev:

input {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
}

So border takes 2*2px and padding taking 2*1px equal to 256px

**Arshiya Khanam** · Accepted Answer · 2019-01-18T09:14:57+00:00

Arshiya Khanam On 18 January 2019 at 09:14 BEST ANSWER

Try this one

.inp {
  box-sizing:border-box;
}

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type='text' style="width:250px" class= "inp">
<div style='width:250px;background-color:#00FF00'>&nbsp;</div>

</form>
</body>
</html>

TechQA.

HTML 5 Doctype Textfield larger than given width

There are 2 answers

Related Questions in CSS

Related Questions in HTML

Popular Questions

Popular Tags

Trending Questions