如何在不使用Bootstrap的情况下实现同款表单CSS样式

我尝试不引入Bootstrap框架，仅通过复制相关CSS代码实现和Bootstrap一致的表单样式，但显示效果不符合预期。

效果对比 #

• 预期效果：
  
• 实际效果：
  

解决方法 #

1. 对齐HTML结构与类名 #

Bootstrap表单依赖特定的类名层级，检查你的HTML是否完全沿用了Bootstrap的结构规范，比如用.form-group包裹标签与控件、给输入框添加.form-control类：

<div class="form-group">
  <label for="email">Email address</label>
  <input type="email" class="form-control" id="email" placeholder="Enter email">
</div>

类名不匹配会导致自定义CSS选择器无法命中元素，直接导致样式失效。

2. 补全核心CSS规则 #

你复制的CSS大概率遗漏了Bootstrap表单的关键基础样式，补充以下核心规则可快速对齐基础效果：

/* 表单组间距 */
.form-group {
  margin-bottom: 1rem;
}

/* 表单控件基础样式 */
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* 控件焦点状态 */
.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

3. 完善校验提示样式 #

从预期效果看包含校验反馈，需补充.valid-feedback/.invalid-feedback相关规则，并确保校验状态下控件添加了is-valid/is-invalid类：

/* 成功提示 */
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #28a745;
}
.is-valid ~ .valid-feedback {
  display: block;
}

/* 错误提示 */
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #dc3545;
}
.is-invalid ~ .invalid-feedback {
  display: block;
}

4. 排查样式优先级冲突 #

打开浏览器开发者工具（F12），选中表单元素查看生效样式，排查是否有其他CSS规则（如内联样式、ID选择器）覆盖了自定义表单样式，必要时可通过调整选择器优先级解决（不推荐滥用!important）。

内容的提问来源于stack exchange，提问作者sarann