Как изменить высоту

Question

У меня есть следующая форма:

<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>

и следующий код:

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

Панель поиска теперь 5em, но высота кнопки отправки не изменилась.Я видел ответы, которые предлагают использовать <input type="submit" height = "x">, но чувствую, что должен быть способ сделать это с помощью CSS?

Answer 1

Вы можете попробовать код ниже.

#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>

Answer 2

Пожалуйста, замените <input type='submit' на <button type='submit'.

Это также позволит вам применить правильный CSS.Пожалуйста, смотрите пример ниже.

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

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

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


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

Пожалуйста, перейдите по следующей ссылке для более подробной информации.

input type = "submit" По сравнению с тегом кнопки они взаимозаменяемы? .

Answer 3

Это может помочь CSS

#search_bar_submit_button{
  max-height: 50px;
}

Answer 4

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

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