How to change height of

Question

I am have the following form:

<form>
  <input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City">
  <input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>

and the following css:

#search_bar, #search_bar_submit_button{
  height: 5em;
}

The search bar is now 5em but the submit button's height has not changed. I have seen answers that suggest using <input type="submit" height = "x">, but feel there has to be a way to do this with CSS?

Your code works fine for me. Should take out that space you have on the button around the id's equal sign though — abney317, Sep 24 '19 at 03:50
Your current code works without any changes. You could maybe check if any other css is overriding the defined css or not. — vS12, Sep 24 '19 at 03:59
As mentioned, your code works as intended. Do a test, try replacing the height with `height: 5em !important;` . See if that works, if it does work, then it means some other class has been set and interfering. Try not to use `!important`. Fix that class that has been interfering. — Gosi, Sep 24 '19 at 05:48

score 0 · Answer 1 · answered Sep 24 '19 at 04:44

0

input[type=submit] {
  font-size: 5em;
}

<input type="submit" value="Submit">

answered Sep 24 '19 at 04:44

Adrian Brand

20,384
4
39
60

score 0 · Answer 2 · answered Sep 24 '19 at 05:02

Please replace <input type='submit' with <button type='submit'.

This will also allow you to apply proper CSS. Please see example below.

input[type='submit'] {
 height: 5em;
}

button[type='submit'] {
 height: 5em;
}

<input type='submit' value='Search'/>


<button type='submit'>Search</button>

Please go through following link for more details on it.

input type="submit" Vs button tag are they interchangeable?.

score 0 · Answer 3 · answered Sep 24 '19 at 05:19

0

This may help CSS

#search_bar_submit_button{
  max-height: 50px;
}

answered Sep 24 '19 at 05:19

Ajay Kumar Oad

560
5
15

score 0 · Answer 4 · answered Sep 24 '19 at 05:43

You can try below code.

#search_bar_submit_button {
    width: 10em;
    height: 4em;
}

<form>
  <input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City"><br/><br/>
  <input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>

How to change height of

4 Answers4