如何修改Bootstrap-4 typeahead.js自动补全文本的颜色？

嘿，这个问题我太懂了——默认的黑色自动补全文本和输入内容几乎没区别，确实容易让人误以为是自己已经输入的内容，分两种场景给你解决：

如果是指输入时弹出的下拉选项文本，直接针对typeahead的核心类写CSS就行：

/* 把下拉选项的默认文本改成灰色 */
.tt-suggestion {
  color: #6c757d; /* 这是Bootstrap 4自带的柔和灰色，和框架风格统一，也可以换成#999这类自定义灰度值 */
}

/* 可选：调整选中选项时的文本+背景色，增强区分度 */
.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #007bff; /* Bootstrap主色，也可以换成你需要的颜色 */
}

要是你说的是输入框里直接显示的补全预填文本（比如输"app"后跟着的"le"提示），那需要调整隐藏的提示元素样式，让它显示出来并变成灰色：

/* 显示输入框内的补全提示，并设置为灰色 */
.tt-hint {
  color: #6c757d !important;
  position: absolute;
  top: 0;
  left: 0;
  border-color: transparent;
  box-shadow: none;
  opacity: 1; /* 默认是0隐藏状态，改成1就显示出来了 */
  background-color: transparent;
}

/* 确保自己输入的内容在提示文本上方，避免被覆盖 */
.tt-input {
  position: relative;
  z-index: 2;
  background-color: transparent;
}

小提示 #

如果你的项目里给typeahead加了自定义类名，记得把上面的.tt-suggestion、.tt-hint换成你实际用的类。另外，颜色值可以根据你的设计随便调，只要和输入内容的黑色拉开差距就行～

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