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

时间:2016-08-20 16:58:25

标签: html css twitter-bootstrap

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

select example

以下是我使用的相关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时,我想使用表单控件类使控件看起来像其他控件一样,但是这个选择控件看起来更像是文本输入。

更新

此问题与使用不同的分辨率(通过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的小提琴的结果:

Result of fiddle from below

0 个答案:

没有答案