如何阻止Bootstrap自动为自定义Select元素添加Div及类？

以下是几种可行的解决方案，按优先级排序：

1. 直接禁用Bootstrap对该元素的自动初始化 #

Bootstrap的JS组件会自动初始化符合条件的表单元素，给你的select添加data-bs-auto-init="false"属性，就能阻止它被Bootstrap处理：

<div class="widget-selectbox-container">
  <select name="like" class="select-meow" data-bs-auto-init="false">
        <option value="">Select Likes</option>
        <option value="1">1</option>
        <option value="2">2</option>
  </select>
</div>

2. 限定Bootstrap Select的初始化范围 #

如果你的主题是通过自定义JS加载Bootstrap组件，可以修改初始化代码，只针对带有form-select类的select进行处理，这样你的自定义select-meow就不会被干扰：

// 替换原有的全局初始化代码，只处理指定类的select
document.querySelectorAll('select.form-select').forEach(element => {
  new bootstrap.Select(element);
});

3. 用CSS重置容器内的样式 #

如果上面的方法都不生效，可以给外层容器添加一个自定义类，然后通过CSS重置该容器内所有元素的样式，抵消Bootstrap的影响：
首先修改HTML：

<div class="widget-selectbox-container bootstrap-ignore">
  <select name="like" class="select-meow">
        <option value="">Select Likes</option>
        <option value="1">1</option>
        <option value="2">2</option>
  </select>
</div>

然后在自定义CSS中添加：

.bootstrap-ignore * {
  all: revert;
}

这个方法会让容器内的元素恢复到浏览器默认样式，你可以在此基础上重新定义自己的样式。

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