Bootstrap 4表单下拉箭头与复选框不显示问题求助

我一眼就发现问题所在啦——你自定义CSS里的全局appearance: none;（包括各个浏览器前缀）把Bootstrap默认的表单控件样式给彻底覆盖了！这个属性的作用就是移除浏览器自带的控件默认外观，下拉框的箭头、复选框的原生样式自然就消失了。

具体修复步骤： #

1. 移除全局的外观重置代码
   把全局选择器*里的appearance相关代码删掉，因为全局设置会影响所有元素，包括Bootstrap的原生表单控件：

   /* General Styles */
   * {
    font-family: 'Poppins', sans-serif;
    outline: none;
    /* ↓ 删掉这几行问题代码 ↓ */
    /* appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none; */
   }
   

2. 按需设置自定义控件的外观（可选）
   如果确实需要给你自己的文本输入框去掉默认外观，不要用全局选择器，只针对你的自定义类设置，避免影响Bootstrap的下拉框和复选框：

   .input-normal, .input-dropdown {
    border: 2px solid #eee;
    height: 50px;
    font-size: 1em;
    color: #495057;
    /* 仅给文本输入框设置，下拉框不要加！ */
    /* appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none; */
   }
   

3. 完善复选框的结构（可选）
   你的复选框目前只有<input>标签，建议加上对应的<label>，既符合Bootstrap的表单规范，也能提升页面可访问性：

   <div class="form-check">
     <input type="checkbox" class="form-check-input" id="whatsappCheck">
     <label class="form-check-label" for="whatsappCheck">同意接收WhatsApp通知</label>
   </div>
   

这样修改后，Bootstrap的下拉框箭头和复选框就能恢复默认显示了，同时你的自定义输入框样式也能保留~

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