CSS属性选择器如何针对特定属性元素定制[type="text"]输入框样式

在网页表单开发中，我们常常需要只给普通文本输入框设置特定样式，而不去改动密码框、按钮或其他类型的输入控件。CSS属性选择器正好提供了这种按属性值筛选元素的能力，其中针对的[type="text"]写法是最常用的场景之一。

什么是CSS属性选择器

属性选择器通过元素的属性名或属性值来选取对应的DOM节点，不需要额外添加class或id。基础语法是用方括号包裹属性，例如[type]表示选中所有带type属性的元素，而[type="text"]则只匹配type等于text的元素。

用[type="text"]定制输入框样式

下面这段代码演示了如何给页面上所有的文本输入框统一设置边框、内边距，以及鼠标聚焦时的高亮效果：

/* 选中所有type为text的输入框 */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 4px;
  outline: none;
}

/* 聚焦时改变边框颜色 */
input[type="text"]:focus {
  border-color: #409eff;
  box-shadow: 0 0 4px rgba(64, 158, 255, 0.4);
}

避免影响其他输入类型

如果不使用属性选择器，直接写input { ... }会把密码框、提交按钮都套用同一样式。而[type="text"]只认文本输入框，结构如下：

<form>
  <input type="text" placeholder="用户名">
  <input type="password" placeholder="密码">
  <input type="submit" value="登录">
</form>

在上面的HTML中，只有第一个输入框会应用我们写的文本样式，密码框和按钮保持原样。

结合其他属性进一步筛选

属性选择器还支持模糊匹配。比如只想选name以user开头的文本框，可以写成input[type="text"][name^="user"]。这种写法在多个表单共用样式时非常灵活。

小结

使用CSS属性选择器中的[type="text"]可以精准控制文本输入框表现，减少冗余类名，让表单样式更好维护。实际项目中建议把基础输入框样式放在统一选择器里，再用更具体的属性组合处理特殊字段。

CSS属性选择器type_text输入框样式修改时间：2026-07-30 08:54:18