How to resize HTML textbox-HTML Tutorial-php.cn

How to resize HTML textbox

WBOY

Release： 2024-02-20 10:03:07

Original

1175 people have browsed it

How to resize HTML textbox

Setting the size of the HTML text box is a very common operation in front-end development. This article explains how to set the size of a text box and provides specific code examples.

In HTML, you can use CSS to set the size of the text box. The specific code is as follows:

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="text"] {
      width: 300px;
      height: 30px;
    }
  </style>
</head>
<body>
  <input type="text" placeholder="请输入文本" />
</body>
</html>

Copy after login

In the above code, we use the input[type="text"] CSS selector to select all input boxes of type "text" . Then set the width and height through the width and height properties. In this example, we set the width to 300 pixels and the height to 30 pixels respectively.

With the above code, a text box will appear on the page with a size of 300 pixels wide and 30 pixels high. You can adjust these values according to your needs.

In addition to setting fixed sizes directly, you can also use percentages to set relative sizes. For example, we can set width in the above code to 50% to make the width of the text box occupy half of the width of the parent element:

<input type="text" style="width: 50%" placeholder="请输入文本" />

Copy after login

After setting this, the width of the text box will follow Changes when the width of the parent element changes, always occupying half of the width of the parent element.

In addition, you can also set the maximum and minimum width of the text box through the max-width and min-width properties of CSS. The code example is as follows:

<input type="text" style="max-width: 500px; min-width: 200px;" placeholder="请输入文本" />

Copy after login

In the above code, we set the maximum width of the text box to 500 pixels and the minimum width to 200 pixels. After this setting, the width of the text box will automatically adjust according to the width of the parent element, but will not exceed the maximum width and minimum width limits.

With the above code example, you can freely set the size of the HTML text box as needed. Whether it is fixed size, relative size or limiting the maximum and minimum width, it can be set according to specific needs.

The above is the detailed content of How to resize HTML textbox. For more information, please follow other related articles on the PHP Chinese website!