在网页开发中，文本框是表单交互中使用频率最高的控件之一。无论是单行输入框还是多行文本域，其宽度和高度都会直接影响页面的可读性、操作体验以及整体布局的协调性。CSS 为开发者提供了 width、height、padding、box-sizing 等属性，可以按照不同选择器范围灵活调整文本框的尺寸。常见的文本框元素包括 <input> 标签中的 text 类型、password 类型，以及用于长文本编辑的 <textarea> 元素。通过对这些元素设置合适的宽高，可以避免输入区域过小导致内容显示不全，也可以防止尺寸过大破坏页面结构。
一、通过元素选择器统一设置文本框宽高
当页面中的多个文本框需要保持相同尺寸时，可以使用元素选择器或属性选择器直接选中目标元素，例如使用 input[type="text"]、input[type="password"] 和 textarea。这种方式无需修改 HTML 结构，只需要在样式表中定义一次规则，即可让所有匹配的元素同时生效，适合全局统一风格的场景。设置宽高时最核心的属性是 width 和 height。对于单行文本框，为了保证输入文字与边框之间留有合适间距，通常会搭配 padding 一起使用；对于多行文本框，则可以设置更高的高度来容纳更多行内容。
下面的 CSS 示例分别对单行文本框和多行文本框进行了统一设置。单行文本框使用属性选择器精确匹配 text 和 password 类型，避免影响其他 <input> 类型，例如 checkbox 或 radio。多行文本框则直接使用 textarea 元素选择器。代码中还加入了内边距，使输入文字的起始位置不会紧贴边框，改善视觉效果。
/* 统一所有单行文本框的宽度和高度 */
input[type="text"],
input[type="password"] {
width: 300px;
height: 40px;
/* 左右内边距控制文字与边框的距离 */
padding: 0 10px;
}
/* 统一所有多行文本框的宽度和高度 */
textarea {
width: 400px;
height: 120px;
padding: 10px;
}
二、通过类名复用文本框宽高样式
如果页面中只有部分文本框需要特定尺寸，或者需要提供多套可切换的尺寸方案，使用元素选择器就会显得不够灵活。这时可以定义一组 CSS 类，将不同宽高组合封装成可复用的样式。给目标文本框添加相应类名后，样式就会立即生效。这种方式的优势在于可维护性强，修改某个类的宽高不会影响其他文本框，同时也能在同一个页面中组合出多种尺寸。
例如，可以定义 .small-input 和 .large-input 两个尺寸类，分别对应小尺寸输入框和大尺寸输入框。CSS 部分只需要关注宽高，不涉及具体业务结构；HTML 部分则通过 class 属性把样式应用到 <input> 或 <textarea> 上。下面的示例展示了完整定义和对应结构。
/* 小尺寸文本框样式 */
.small-input {
width: 220px;
height: 34px;
padding: 0 8px;
}
/* 大尺寸文本框样式 */
.large-input {
width: 520px;
height: 48px;
padding: 0 12px;
}
<input type="text" class="small-input" placeholder="小尺寸文本框"> <input type="text" class="large-input" placeholder="大尺寸文本框"> <textarea class="large-input" placeholder="大尺寸多行文本框"></textarea>
三、使用内联样式设置单个文本框宽高
如果只需要对某一个特定文本框设置独立的尺寸，且不需要被其他元素复用，可以直接使用 HTML 的 style 属性写入内联样式。内联样式直接作用于当前元素，优先级高于外部样式表和内部样式表中同属性的普通规则，因此适合临时调整或覆盖默认样式。对于小型页面或快速原型来说，使用内联样式非常直观，但要注意当样式需要复用时，最好还是将它们提取到外部 CSS 类中，避免重复代码。
下面示例给一个文本框设置了 width: 280px 和 height: 36px。由于内联样式直接写在元素上，即使外部样式表中存在针对同类 <input> 的规则，这个元素的宽高依然以内联样式为准。示例中同时设置了 placeholder 提示文字，方便在浏览器中查看尺寸效果。
<input type="text" style="width: 280px; height: 36px;" placeholder="内联样式设置的文本框">
四、盒模型、单位选择与其他实用注意事项
设置文本框宽高时，单位的选择会直接影响响应式布局的效果。像素单位 px 是固定尺寸，适合需要精确控制的场景；rem 相对根元素字体大小计算，适合整体字号变化时保持比例；百分比 % 则相对父容器宽度计算，常用于流式布局。实际开发中，如果希望文本框随父容器变化，可以使用 width: 100% 并配合最大宽度 max-width 进行限制。但是当使用百分比时，height 通常不能直接使用百分比达到类似效果，除非父元素具有明确高度。
盒模型也是设置宽高时容易忽略的细节。默认情况下，大多数浏览器使用 content-box 模型，width 和 height 只包含内容区域，而 padding 和 border 会额外增加元素的实际占用尺寸。因此如果定义了 width: 300px，同时设置了 10px 内边距和 1px 边框，实际渲染宽度会比 300px 更大。为了更方便地控制最终尺寸，可以将 box-sizing 设置为 border-box，这样宽高就包含了内容区、内边距和边框，减少布局计算负担。
多行文本框 <textarea> 默认可以被用户通过右下角拖拽改变大小，这种交互有时会破坏布局。可以通过 resize: none; 禁止拖拽，或者使用 resize: vertical; 只允许垂直方向调整。下面的示例将盒模型设置为 border-box，并禁止多行文本框拖拽，确保尺寸完全由 CSS 控制。
/* 设置固定尺寸的单行文本框 */
.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;
}
五、总结与使用建议
设置文本框宽高的核心是灵活运用选择器和尺寸属性。全局统一风格时使用元素选择器或属性选择器；多个元素需要复用样式时定义类选择器；单个元素临时覆盖时使用内联样式。三者可以组合使用，但要注意样式优先级和可维护性。内联样式虽然直接，却容易造成样式分散，因此建议在正式项目中优先将尺寸规则维护在 CSS 文件中。
除了 width 和 height，开发者还应该关注 box-sizing、padding、border、resize 等关联属性。它们共同决定了文本框在页面中的最终占用空间和交互行为。合理使用 border-box 可以降低尺寸计算难度，禁止 textarea 拖拽可以保持布局稳定。最后，根据响应式设计需要选择合适的单位，必要时通过媒体查询在不同屏幕宽度下调整文本框尺寸，从而获得更好的用户体验。
csswidthheightinput_textbox修改时间：2026-07-19 08:12:18