使用 Bootstrap(使用 Firefox 浏览器)的表单上,选择控件缺少箭头图标

2024-02-29

我在使用 Bootstrap(使用 Firefox 浏览器)的表单上有一个选择控件,但它缺少右侧的箭头图标:

这是我使用的相关 HTML:

<div class="container-fluid">
    <form id="form" method="post" action="process.php">
        <div class="form-group">
            <label class="lbl" for="choose">Choose</label>
            <select class="form-control" id="choose" name="choose" required>
                <option value="Foo">Foo</option>
                <option value="Bar">Bar</option>
            </select>
        </div>
        <input type="submit" name="button" value="Submit" class="btn-primary">
        <input type="button" name="cancel" value="Cancel" class="btn-primary" onclick="clkcnc();">
    </form>
</div>

这是我在这些元素上使用的唯一 CSS:

body {
    font-size: 20px;
}
.form-control {
    padding-top: 6px;
}
.lbl {
    padding-top: 6px;
}

在我的表单上使用 Bootstrap 时,我想使用 form-control 类使该控件看起来像其他控件,但此选择控件看起来更像文本输入。

Update

此问题与使用不同的分辨率有关(通过 Firefox 中的响应式设计模式)。在我的例子中,分辨率为 480 x 854。当我关闭该模式时,浏览器将在 1600 x 900 的屏幕分辨率内显示,选择控件将正常显示,并在右侧显示箭头图标。不幸的是,我需要页面以窄分辨率工作。以下是我的基本页面设置中的元设置:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, 
user-scalable=no">

以下是来自 link2pk 的小提琴结果:


  1. 升级到 Bootstrap v5.2 +
  2. 如果使用 Bootstrap v5,请尝试 form-select 而不是 form-control(请参阅:https://getbootstrap.com/docs/5.0/forms/select/ https://getbootstrap.com/docs/5.0/forms/select/ )
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 Bootstrap(使用 Firefox 浏览器)的表单上,选择控件缺少箭头图标 的相关文章