Question

我正在使UI充满表单元素，并且我希望所有元素都是大尺寸元素。但是下拉菜单确实是问题所在。没有线高，没有填充能够解决此问题。我在应用程序上使用Bootstrap v3作为UI框架。我正在使用Open Sans字体。

这是它的样子：

以下是代码，我正在使用：

HTML：

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

CSS：

label {
    font-size: 2.8vh;
    display: block;
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
}
.form-control {
    padding-top: 0;
    padding-bottom: 0;
    height: 5vh;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

我尝试了一些解决方案，但它们对我不起作用。

减小字体：

增加下拉菜单的高度或自动设置高度：

我正在寻找解决此问题的方法，但是在Stack Overflow中找不到任何帮助。可以解决吗？

谢谢

Answer 1

您可以增加选择框的高度，如下所示：

select.form-control  { //only targets select boxes with a class of form-control
    padding-top: 0;
    padding-bottom: 0;
    height: 15vh; //or min-height: 15vh; 
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

不设置高度：

select.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

Answer 2

.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

您可以通过增加表单控件的高度或从表单控件中删除height属性来解决此问题，以使选择字段的高度环绕文本。

Answer 3

已删除height: 15vh;，它正在按预期方式工作。希望这可以帮助。谢谢

label {
    font-size: 2.8vh;
    display: block;
    margin-bottom: 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.4;
}
.form-control {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

<div class="form-group">
<label>Reference</label>
<select class="form-control text-center"  readonly="">
<option>Choose...</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>

Answer 4

在选择框上使用line-height:5vh代替高度。它可能会解决该问题。

.form-control {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 5vh;
    font-size: 5vh;
    border-radius: 1.8vh;
    border-width: 0.1vh;
    text-align-last: center;
}

大选择选项下拉菜单中的文本剪切

4 个答案: