直接用 input[type="xxx"] 可区分类型，但需防范默认样式干扰和选择器范围失控；应组合限定选择器、重置 appearance、按类型定制交互状态，并统一处理 :disabled 等通用状态。

直接用 input[type="xxx"] 就能区分，不需要额外 class，但得注意浏览器默认样式干扰和选择器范围失控的问题。

用 [type] 选中具体类型最常用写法

HTML 中 type 属性是真实存在的，CSS 能直接读取并匹配。比如：

• input[type="text"] 控制普通文本框边框、内边距
• input[type="password"] 可加虚线边框或浅灰背景，暗示敏感输入
• input[type="email"] 或 input[type="url"] 可统一设 text-transform: lowercase 辅助格式规范
• input[type="submit"] 和 input[type="reset"] 必须视觉可辨，前者绿色粗体，后者建议降权（如浅橙+细边框）

别单独用 input[type="text"] 这种宽泛选择器

现代框架（React/Vue）常把未声明 type 的 input 默认补成 type="text"，结果你写的样式会意外命中搜索框、隐藏域甚至富文本编辑器里的 input。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 推荐组合限定：比如 form.login-form input[type="password"] 或 input[type="search"].header-search
• 避免只靠 type 控制密码框的“显示/隐藏”按钮逻辑——这类交互应由 class 驱动（如 .has-toggle），type 仅负责基础样式
• input[type="number"] 在 Chrome 里有上下箭头，Safari 没，Firefox 渲染位置还不一样，单靠 [type] 无法跨浏览器一致

处理 HTML5 新增类型要重置 appearance

date、color、range 这些类型在不同浏览器里长得完全不一样，不重置就等于放弃控制权。

• 必须加 appearance: none（配合 -webkit-appearance 和 -moz-appearance 前缀）
• input[type="color"] 别设 background，会盖住原生取色器；用 width/height 和 border-radius 控制色块尺寸即可
• input[type="search"] 的清除按钮（×）需手动隐藏：input[type="search"]::-webkit-search-cancel-button { display: none; }
• input[type="range"] 的滑块轨道样式必须分开写：::-webkit-slider-thumb 和 ::-moz-range-thumb 不通用

伪类组合能增强类型专属交互反馈

单纯静态样式不够，聚焦、勾选、悬停这些状态也要按类型定制。

• input[type="search"]:focus 可加 box-shadow 扩展视觉焦点范围
• input[type="checkbox"]:checked + label 实现勾选后文字高亮，比 JS 监听更轻量
• input[type="radio"]:hover ~ .radio-tip 鼠标悬停时显示提示文案（需确保 DOM 结构支持兄弟选择器）
• 注意：:disabled 状态不要只靠 [type] 区分，所有类型都该统一灰阶处理

真正麻烦的不是怎么写选择器，而是浏览器对 number、date、color 这些类型的原生渲染差异太大，appearance: none 之后还得自己补交互细节——比如 date 输入框点开后弹出的日历样式，CSS 根本管不了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！