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

Cleverly adjust the input height so that the text can be elegantly oriented to the bottom

In web development, it is often necessary to fine-tune the style of form elements, especially adjust the input height and keep the text at the bottom. This article will provide a flexible solution that does not require padding to achieve this effect.

Requirement description

Suppose we have an input element that needs to set a higher height value, but the default vertical centering alignment does not meet the requirements, and we need to place the text at the bottom.

Solution: Use containers and absolute positioning

To avoid the limitations brought by using padding, we can create a container to wrap the input element and use CSS positioning technology to achieve text bottom alignment. The specific steps are as follows:

1. Hide input default style: set the border of the input to none through CSS, and set the background-color to transparent to make it invisible.

2. Create a custom container: Use a div element as the container, set the same height as the input, and add borders and background colors to simulate the appearance of the input.

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

The following are HTML and CSS code examples:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .input-container {
      height: 60px;
      border: 1px solid #ccc;
      position: relative; /* 关键：使子元素可以绝对定位 */
    }
    .input-container input {
      height: 100%;
      width: 100%;
      border: none;
      background-color: transparent;
      position: absolute;
      bottom: 0; /* 关键：将input定位到底部 */
    }
  </style>


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

Through the above method, we successfully set the input height to 60 pixels and place the text gracefully at the bottom while maintaining the flexibility and scalability of the scheme.

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