如何移除Bootstrap 5.3中搜索栏输入框的透明度？

你遇到的问题根源在于Bootstrap 5.3的.form-control默认使用RGBA颜色值实现背景半透明，而非元素的opacity属性，所以之前的尝试才没达到预期效果：

• 设置opacity:1无效，因为输入框的半透明是背景色自带的alpha通道控制，不是元素整体透明度
• 你写的#ffff是错误的颜色值（正确纯白应为#ffffff或#fff），且样式优先级可能没超过Bootstrap的默认样式

下面是两种彻底去除输入框透明度的有效方法：

方法一：直接设置不透明纯色背景 #

使用更高权重的选择器覆盖Bootstrap默认样式：

#searchbar.form-control {
  background-color: #ffffff; /* 完全不透明的纯白背景 */
}

如果还是被默认样式覆盖，可添加!important强制生效：

#searchbar.form-control {
  background-color: #ffffff !important;
}

方法二：修改背景色的alpha通道为1 #

Bootstrap默认的.form-control背景色是rgba(255, 255, 255, 0.85)，只需把最后一位的透明度值改成1即可：

#searchbar.form-control {
  background-color: rgba(255, 255, 255, 1);
}

额外检查 #

如果以上方法仍无效，排查父元素是否设置了opacity属性（子元素会继承父元素的透明度），但从你的代码来看，父元素没有相关设置，所以重点还是输入框自身的背景样式。

内容的提问来源于stack exchange，提问作者Hopeful-Citizen