0

If a select tag respects the 100% defined in the CSS, then why can't an input? When inspecting it at the Box Model in Firefox, I see a padding of 1 and a lateral border of 5.33333!

screenshot showing border > 5

Why doesn't that border appear around the input? And why is it defined so large as default? What for? I noticed that applying a CSS box-sizing:border-box; solves the issue, but where is all this specified? I see nothing on MDN.

div {
  background-color:green;
  width:300px;
  height:200px;
}
#txt {
  width:100%;
}
#sel {
  width:100%;
}
<div>
  <p>&nbsp;</p>
  <input type='text' id='txt' />
  <p>&nbsp;</p>
  <select id='sel'>
  </select>
</div>

Improve this question
7
  • it's the default style add to the input (adding duplicate for it too) Commented Aug 7, 2019 at 21:56
  • added more duplicate Commented Aug 7, 2019 at 22:06
  • @TemaniAfif Thanks, but I just couldn't find where 5.33333 is coming from. I looked in forms.css and in html.css (resource://gre-resources/). Commented Aug 7, 2019 at 22:34
  • you will have headaches trying to find this, you simply need to know that each browser add a default style that you can see on inspecting the element. You should never rely on default styles that's why in most of sites you see a reset.css to remove those default one Commented Aug 7, 2019 at 22:40
  • @TemaniAfif I see. I would just like to understand why 5.33333 for something that obviously is occupying ~ 1 pixel. Because maybe understanding how this people think could make CSS more intuitive... Commented Aug 7, 2019 at 22:51
Related questions
4418
Change an HTML input's placeholder color with CSS
2533
How can I make a div not larger than its contents?
2592
Disable/enable an input with jQuery?
Load 5 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.