How to increase the height of the input while keeping the text at the bottom?

Tips for getting text to align the bottom of the high input box

In web development, it is often necessary to create input boxes with a larger height and let the text in it be at the bottom instead of the default vertical center. This article introduces several ways to achieve this effect.

Problem: Text centered vertically

An input box with a height of 60px, whose text is displayed vertically centered by default. We need to adjust it to the bottom.

Solution: Leverage CSS

Without padding, we can do it with clever CSS layout. The method is to hide the default border of the input, then wrap the input with a container with the border and position it to the bottom of the container.

step:

1. Hide input default border: use border: none; remove input's default border.

2. Create a container with borders: Create a div container, set its height and border style.

3. Position input to the bottom of the container: Use position: absolute; and bottom: 0; to absolutely locate input to the bottom of the container.

Code example:

 


<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
  height: 60px;
  border: 1px solid #ccc;
  position: relative; /* 关键：使绝对定位的子元素相对于此容器定位 */
}
input {
  height: 100%;
  border: none;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总宽度和高度内 */
}
</style>


  <div class="container">
    <input type="text" placeholder="请输入文本">
  </div>

With the above method, the text will always remain at the bottom even if the input height increases. box-sizing: border-box; ensures that the height calculation of input includes borders and inner margins, avoiding deviations in height calculation.

The above is the detailed content of How to increase the height of the input while keeping the text at the bottom?. For more information, please follow other related articles on the PHP Chinese website!