How to make the input height higher but the text is at the bottom?

Tips for making the input height higher and the text bottom alignment

In web design, it is often necessary to adjust the style of form elements, such as setting a higher input box while keeping the text at the bottom rather than in the center. This article will introduce a clever way to avoid padding.

Assume that the existing HTML structure is 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" placeholder="请输入文字">

In this code, the input height is 60 pixels, but the text is vertically centered. To get the text at the bottom, we can use the following method:

1. Hide the default border: use border: none; remove the default border of input.
2. Create a custom container: Create a div container and set the border to simulate the appearance of the input box.
3. Bottom alignment input: Position input to the bottom of the container using flex layout.

The improved code is as follows:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <style>
    .custom-container {
      height: 60px;
      border: 1px solid #ccc;
      display: flex;
      align-items: flex-end; /* 关键：将项目垂直对齐到底部 */
    }
    input {
      border: none;
      height: 20px; /* 调整高度以适应文字大小 */
      width: 100%;
      margin-bottom: 5px; /* 微调底部间距 */
    }
  </style>


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

Through this method, we successfully set the input height to 60 pixels, while the text is precisely located at the bottom and can flexibly control the appearance of the input. This method is more controllable and flexible than simply using padding.

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