javascript - Increasing the size of a input field in HTMLCSSJS - Stack Overflow

admin管理员组

文章数量:1026989

I am trying to increase the size of an input field on a webpage. My width is fine, but my height is what I am trying to figure out.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>
<!-- searchBox -->

I am trying to increase the size of an input field on a webpage. My width is fine, but my height is what I am trying to figure out.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>
<!-- searchBox -->

• javascript
• html
• css

Share Improve this question Follow edited Oct 20, 2015 at 13:48 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Oct 20, 2015 at 13:47 TheDetailerTheDetailer 29966 silver badges1616 bronze badges 4

• 1 Have you tried setting a height on the input? – j08691 Commented Oct 20, 2015 at 13:49
• Yes, I have tried adding css code to every tag/element for that block of code, along with trying to manually add the css through the html tags. – TheDetailer Commented Oct 20, 2015 at 13:50
• padding: 40px 20px this modifies height and width seperatly – NooBskie Commented Oct 20, 2015 at 13:52
• 1 Really? Because setting the height seems to work jsfiddle/j08691/9g6tpbox – j08691 Commented Oct 20, 2015 at 13:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can simply increase the font size; the input will scale along with it.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

#searchBox input {
  font-size: 200%;
  width: 100px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>

There are 2 ways to do this. You may set the height with the attribute height inside the input, or change the height via css.

First Method:

<input type="text" name="search" height="200" />

Second Method:

input[name="search"] {
    height: 200px;
}

I prefer using the first one. Since it better expands to the text inside of it. But for using it multiple times, css is the way to go.

Also note that the first method might not work if you arent using any reset css or modernizer since browsers tend to overwrite/ignore the height attribute inside elements like inputs.

I am trying to increase the size of an input field on a webpage. My width is fine, but my height is what I am trying to figure out.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>
<!-- searchBox -->

I am trying to increase the size of an input field on a webpage. My width is fine, but my height is what I am trying to figure out.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>
<!-- searchBox -->

• javascript
• html
• css

Share Improve this question Follow edited Oct 20, 2015 at 13:48 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Oct 20, 2015 at 13:47 TheDetailerTheDetailer 29966 silver badges1616 bronze badges 4

• 1 Have you tried setting a height on the input? – j08691 Commented Oct 20, 2015 at 13:49
• Yes, I have tried adding css code to every tag/element for that block of code, along with trying to manually add the css through the html tags. – TheDetailer Commented Oct 20, 2015 at 13:50
• padding: 40px 20px this modifies height and width seperatly – NooBskie Commented Oct 20, 2015 at 13:52
• 1 Really? Because setting the height seems to work jsfiddle/j08691/9g6tpbox – j08691 Commented Oct 20, 2015 at 13:53

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You can simply increase the font size; the input will scale along with it.

#searchBox {
  color: white;
  float: right;
  margin-right: 10px;
  padding: 20px;
}

#searchBox input {
  font-size: 200%;
  width: 100px;
}

<div id="searchBox">
  <form action="search" id="searchBar">
    <input type="text" name="search">
  </form>
</div>

There are 2 ways to do this. You may set the height with the attribute height inside the input, or change the height via css.

First Method:

<input type="text" name="search" height="200" />

Second Method:

input[name="search"] {
    height: 200px;
}

I prefer using the first one. Since it better expands to the text inside of it. But for using it multiple times, css is the way to go.

Also note that the first method might not work if you arent using any reset css or modernizer since browsers tend to overwrite/ignore the height attribute inside elements like inputs.

本文标签： javascriptIncreasing the size of a input field in HTMLCSSJSStack Overflow