css怎么设置文本框的宽和高

在网页开发中，文本框是用户交互常用的表单元素，通过css可以灵活调整文本框的宽度和高度，适配不同的页面布局需求。常见的文本框元素包括<input>标签的text、password类型，以及<textarea>多行文本框。

一、直接通过元素选择器设置文本框宽高

如果页面中所有的文本框都需要统一的宽高尺寸，可以直接使用元素选择器选中对应的文本框标签，设置width和height属性即可。

以下是针对单行文本框和多行文本框的设置示例：

/* 设置所有单行文本框的宽高 */
input[type="text"], input[type="password"] {
    width: 300px;
    height: 40px;
    /* 可选：设置内边距让文字不贴边 */
    padding: 0 10px;
}

/* 设置所有多行文本框的宽高 */
textarea {
    width: 400px;
    height: 120px;
    padding: 10px;
}

二、通过类名复用文本框宽高样式

如果只有部分文本框需要特定的宽高，或者需要多套不同的尺寸方案，可以定义对应的css类，给目标文本框添加类名即可生效。

示例代码如下：

/* 小尺寸文本框样式 */
.small-input {
    width: 200px;
    height: 32px;
}

/* 大尺寸文本框样式 */
.large-input {
    width: 500px;
    height: 50px;
}

对应的html结构如下：

<input type="text" class="small-input" placeholder="小尺寸文本框">
<input type="text" class="large-input" placeholder="大尺寸文本框">
<textarea class="large-input" placeholder="大尺寸多行文本框"></textarea>

三、使用内联样式设置单个文本框宽高

如果只需要给某一个特定的文本框设置独立的宽高，不需要复用样式，可以直接使用内联样式，优先级高于外部样式表中的设置。

示例代码如下：

<input type="text" style="width: 280px; height: 36px;" placeholder="内联样式设置的文本框">

四、设置宽高的注意事项

• 宽高单位可以选择px、rem、%等，px是固定像素值，rem是相对根元素字体大小的单位，%是相对父容器宽度的百分比，根据实际布局需求选择即可。
• 默认情况下文本框的盒模型是content-box，设置的width和height仅包含内容区域，如果添加了padding和border，实际占用的尺寸会更大。如果需要让设置的宽高包含padding和border，可以设置box-sizing: border-box;。
• 多行文本框<textarea>默认可以手动拖拽调整尺寸，如果不希望用户修改尺寸，可以添加resize: none;样式。

以下是包含盒模型设置和禁止拖拽的完整示例：

.fixed-size-input {
    width: 300px;
    height: 40px;
    /* 让宽高包含内边距和边框 */
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid #ccc;
}

.fixed-size-textarea {
    width: 400px;
    height: 120px;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
    /* 禁止用户拖拽调整尺寸 */
    resize: none;
}

csswidthheightinput_textbox修改时间：2026-07-19 08:12:18