引导 4-beta 自定义选择控件，同时显示自定义和默认插入符号

Question

我正在从 B4 alpha 迁移到 beta，我的自定义选择控件现在同时显示自定义插入符号和浏览器默认插入符号。试图找出什么可以恢复浏览器默认值(在我测试过的所有浏览器中(。这是我的标记：

<div id="memberGroup" class="form-group row">
<label for="memberType" class="col-sm-3 col-form-label">Member Type</label>
<div class="col-sm-9">
<select class="form-control custom-select" required="required" id="memberType" name="memberType">
<option value="" selected="selected">Select...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>

我已经删除了所有自定义样式和变量覆盖，但仍然看到两组插入符号。有什么想法吗？

Answer 1

如果您正在编译 Bootstrap Sass 并且使用的是 Webpack，请确保不仅包含sass-loader，还包含与 Autoprefixer 插件postcss-loader。

https://getbootstrap.com/docs/4.3/getting-started/webpack/#importing-styles

自动前缀程序会查看您的 CSS，并在需要时添加供应商前缀。如果没有这些，您可能会看到某些组件的 UI 故障。

作为参考，以下是我的 Webpack 配置的相关摘录：

module.exports = {
module: {
rules: [
{
test: /.scss$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
// Precompiling Sass requires postcss-loader with Autoprefixer
{
loader: 'postcss-loader',
options: {
plugins: function() {
return [
require('autoprefixer'),
];
},
},
},
{
loader: 'sass-loader',
},
],
},
],
},
};

Answer 2

这在 Bootstrap 4.3.x 中似乎仍然是一个问题。 是的，它与供应商规则有关。

如果您没有使用自动前缀，那么您可以在 scss 或 css 中的某个位置手动添加以下内容：

.custom-select { -webkit-appearance: none; }