How do I change the size of an input box?

HTML-CSS
1

So, I have this code with size="" but it changes nothing for what I can see… why wouldn’t it be responding?

<h2> 
    <form>
      Force (lbs) = 
    <input type="number" size="10" placeholder= "Pressure (psi)"id= "pressure1" value= ""/> x  
    <input type= "number" placeholder= "Area (in²)" id= "area1" value= ""/>
    <button = "equals" id="equals1" >=</button>
    <output type="number" id= "forceResult" ></output> 
  </form>
 </h2>

Here is a visual… I want to make the input boxes smaller because they are too long…

2

You can change the size of elements using CSS.

input {
  width: 100px;
}

or an inline style

<input style='width: 100px' ...>
1 Like
3

Well thanks…

So… what is “size” referring to?

I got it from w3schools here…

4

The size attribute specifies the visible width, in characters, of an element.
https://www.w3schools.com/tags/att_input_size.asp

1 Like
5

I hope I wasn’t confusing. I hadn’t heard of the size attribute before.

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.