How to increase the height of the input element and make the text at the bottom?

Cleverly adjust the height of the input element so that the text can be elegantly docked at the bottom

In web design, it is often necessary to adjust the height of the input element and ensure that the text in it is located at the bottom. However, the default text of the input element is centered vertically, how can this be solved? This article will provide a clever way to not rely on padding.

Problem description

Suppose we have an input element with a height of 60 pixels, and the text is centered by default. We need to adjust the text to the bottom while keeping the height of the input element unchanged.

The initial HTML and CSS codes are as follows:

 


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      height: 60px;
    }
  </style>


  <input type="text">

Solution: Container Method

To achieve the target effect, we can create a container, place the input element in it, and use absolute positioning to accurately control the position of the input. The specific steps are as follows:

1. Hide input default border: Set input's border to transparent or borderless.
2. Create a custom container: Create a div container, set its height and border style.
3. Absolute positioning input: Use position: absolute; to locate input to the bottom of the container.

The modified code is as follows:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
    .input-container {
      height: 60px;
      border: 1px solid #000; /* 可自定义边框样式 */
      position: relative;
    }
    .input-container input {
      height: 100%;
      border: none; /* 隐藏input默认边框 */
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  </style>


  <div class="input-container">
    <input type="text">
  </div>

This method effectively locates the text of the input element to the bottom while maintaining a height of 60 pixels, avoiding the potential layout problems caused by using padding, and more flexible control of style and position.

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