input element, display bock

Question

Why is input element does not take up 100% of the width of its container automatically after changing its display to block? Are there some other factors which also have an influence on that? Thanks. Demo see below:

some explanation: 1. I comment out width:100% intentionally because block level element is supposed to take up 100% of its container width.

#container {
  width: 300px;
  margin: auto;
  background-color: red;
}

input[type="text"] {
  display: block;
  opacity:0.5;
  /*width:100%;*/
}

<body>
  <section>
    <div id="container">
      <input type="text">
    </div>
  </section>
</body>

use with 100% which is going to take the full width of the parent element so your input will be 300px. Hint: add a class to your input fields, do not use "input[type="text"]" to style them. — divisionkiller, Apr 13 '17 at 11:16
I guess @JungleDesigner wants to know why the display-block element (no matter what element it is) does not have the full width automatically. — Werner, Apr 13 '17 at 11:26
Here's some kind of answer: http://stackoverflow.com/questions/11748575/default-input-element-size — Werner, Apr 13 '17 at 13:25
thanks @Werner !, still hoping someone can illustrate this issue — 好吃仙人, Apr 13 '17 at 13:33

score 0 · Answer 1 · answered Apr 13 '17 at 11:12

I'm not an expert, but I'm pretty sure it's because you have commented out width:100%. try decommenting that then it should work

#container {
  width: 300px;
  margin: auto;
  background-color: red;
}

input[type="text"] {
  display: block;
  opacity:0.5;
  width:100%;
}

score 0 · Answer 2 · answered Apr 13 '17 at 11:14

Changed the code check now

#container {
  width: 300px;margin: auto;
  background-color: red;
}

input[type="text"] {
  opacity:0.5;
  width:100%;
border-width:0;
padding:0;
}

<body>
  <section>
    <div id="container">
      <input type="text">
    </div>
  </section>
</body>

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

The input element by default has a border: 2px and a padding: 1px 0 in google chrome

When you were actually applying a width of 100%, the input actually had a width greater than the actual div outside covering it

width of input(set to width of div) + border + padding > width of div

There is a tiny little white area on the right, in case you uncomment width:100% in your code. That white area actually is the input. If you set the border to zero that's really enough to fix things

#container {
  width: 300px;
  margin: auto;
  background-color: red;
}

input[type="text"] {
  display: block;
  opacity: 0.5;
  width: 100%;
  border: 0
}

<body>
  <section>
    <div id="container">
      <input type="text">
    </div>
  </section>
</body>

saleh katebi · Answer 4 · 2017-04-13T12:36:43.817

0

Default size of input is 20, so if you do not define size or css rule for your input automatically its size is 20. The best solution is adding width. try this code:

#container
{
  width: 300px;
  margin: auto;
  background-color: red;
}
input[type="text"] 
{
  display: block;
  opacity:0.5;
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

If you want to be responsive it is better to add box-sizing to all element like this:

* 
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

edited Apr 13 '17 at 12:36

answered Apr 13 '17 at 11:51

saleh katebi

71
3

20 _what_? I tried the above example with: `em`, `ex`, `pc`, `ch`, `%`, `vw`, `rem`, `pt`. Nothing fits the same size. PS.: I didn't tried `px`, `vh` nor print-units like `cm`, `in`, ... – Werner Apr 13 '17 at 11:59
Have you try **box-sizing** ? This CSS Specify that elements should have padding and border included in the element's total width and height. – saleh katebi Apr 13 '17 at 12:06
Okay, i figured out the unit you are talking about is actually the html-width (``). – Werner Apr 13 '17 at 13:25
20 is borrowers default size of an input. You should determine width for your input. – saleh katebi Apr 16 '17 at 08:12

input element, display bock

4 Answers4