如何将Bootstrap .form-control占位符中的星号改为红色？

这个需求其实挺常见的，我给你两种可行的方案，优先推荐纯CSS方案（最简便），如果需要支持星号在占位符任意位置或者兼容老浏览器，再用JS辅助的方案：

方案一：纯CSS实现（星号在占位符开头时适用） #

如果你的占位符里的星号是放在最前面（比如截图里的* Company Name），直接用CSS的伪元素就能搞定，不需要额外插件，完全符合Bootstrap的风格：

/* 先设置占位符的默认暗黑色，和Bootstrap默认样式统一 */
.form-control::placeholder {
  color: #6c757d; /* Bootstrap默认的占位符灰色 */
}

/* 把占位符的第一个字符（也就是星号）改成Bootstrap的危险红色 */
.form-control::placeholder::first-letter {
  color: #dc3545; /* Bootstrap的text-danger对应颜色 */
}

注意事项： #

• 这个方案只适用于星号在占位符最开头的情况
• 兼容性：支持Chrome、Firefox、Edge、Safari 10.1及以上的现代浏览器，基本覆盖绝大多数用户

方案二：JS+CSS实现（支持星号在任意位置） #

如果你的星号可能出现在占位符的中间或末尾，或者需要兼容更老的浏览器，就需要用JS来模拟占位符，这样可以单独给星号设置样式：

步骤1：修改HTML结构 #

给需要处理的输入框添加一个自定义属性，用来存放带星号的占位符文本：

<input type="text" class="form-control" data-custom-placeholder="* Company Name">
<input type="text" class="form-control" data-custom-placeholder="Your Email *">

步骤2：添加CSS样式 #

用来模拟占位符的定位和样式，和Bootstrap的原生占位符保持一致：

/* 给父容器设置相对定位，方便模拟占位符定位 */
.form-control-wrapper {
  position: relative;
}

/* 模拟占位符的样式 */
.custom-placeholder {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  color: #6c757d;
  pointer-events: none;
  font-size: 1rem;
  line-height: 1.5;
  /* 确保和原生占位符的字体、内边距一致 */
}

/* 让输入框在上方，不影响点击 */
.form-control {
  position: relative;
  z-index: 1;
}

步骤3：添加JS逻辑 #

用来动态生成带样式星号的占位符，并处理输入框的聚焦/内容变化事件：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有带自定义占位符的输入框
  const inputs = document.querySelectorAll('.form-control[data-custom-placeholder]');
  
  inputs.forEach(input => {
    // 给输入框包裹一个父容器（如果没有的话）
    if (!input.parentElement.classList.contains('form-control-wrapper')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'form-control-wrapper';
      input.parentNode.insertBefore(wrapper, input);
      wrapper.appendChild(input);
    }
    
    // 获取自定义占位符文本，把星号替换成带Bootstrap危险样式的span
    const placeholderText = input.getAttribute('data-custom-placeholder');
    const formattedPlaceholder = placeholderText.replace(/\*/g, '<span class="text-danger">*</span>');
    
    // 创建模拟占位符的元素
    const placeholderEl = document.createElement('div');
    placeholderEl.className = 'custom-placeholder';
    placeholderEl.innerHTML = formattedPlaceholder;
    
    // 插入到父容器中
    input.parentElement.appendChild(placeholderEl);
    
    // 控制占位符显示/隐藏的函数
    function togglePlaceholder() {
      if (input.value.trim() !== '' || input === document.activeElement) {
        placeholderEl.style.display = 'none';
      } else {
        placeholderEl.style.display = 'block';
      }
    }
    
    // 绑定事件监听
    input.addEventListener('focus', togglePlaceholder);
    input.addEventListener('blur', togglePlaceholder);
    input.addEventListener('input', togglePlaceholder);
    
    // 初始化时检查状态
    togglePlaceholder();
  });
});

优势： #

• 支持星号在占位符的任意位置
• 兼容IE11及以上的浏览器
• 完全复用Bootstrap的样式类（text-danger），保持风格统一

内容的提问来源于stack exchange，提问作者Quade du Toit