Html 大选择选项下拉列表中的文本剪切

我正在制作一个充满表单元素的UI，我希望所有元素都是大尺寸的元素。但是，下拉列表确实是一个问题，因为文本在剪切。没有线条高度，没有填充可以解决问题。我在应用程序上使用BootstrapV3作为UI框架。我使用的是开放式Sans字体

下面是它的样子：

<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>

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;
}

这是我正在使用的代码：

<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>

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;
}

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>

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;
}

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

减少字体：

<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>

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;
}

增加下拉列表的高度或自动设置高度：

<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>

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;
}

我正在寻找解决这个问题的方法，但在堆栈溢出中找不到任何帮助。这能解决吗

谢谢

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

select.form-control{//仅针对具有一类表单控件的选择框
填充顶部：0；
填充底部：0；
高度：15vh；//或最小高度：15vh；
字体大小：5vh；
边界半径：1.8vh；
边界宽度：0.1vh；
文本最后对齐：居中；
}

选择。。。
A.
B
C

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

select.form-control{//仅针对具有一类表单控件的选择框
填充顶部：0；
填充底部：0；
高度：15vh；//或最小高度：15vh；
字体大小：5vh；
边界半径：1.8vh；
边界宽度：0.1vh；
文本最后对齐：居中；
}

选择。。。
A.
B
C

.form控件{
填充顶部：0；
填充底部：0；
字体大小：5vh；
边界半径：1.8vh；
边界宽度：0.1vh；
文本最后对齐：居中；
}

参考文献
选择。。。
A.
B
C

.form控件{
填充顶部：0；
填充底部：0；
字体大小：5vh；
边界半径：1.8vh；
边界宽度：0.1vh；
文本最后对齐：居中；
}

参考文献
选择。。。
A.
B
C

移除

高度：15vh并且它正在按预期工作。希望这有帮助。谢谢


标签{
字号：2.8vh；
显示：块；
页边距底部：0；
文本对齐：居中；
文本转换：大写；
线高：1.4；
}
.表格管制{
填充顶部：0；
填充底部：0；
字体大小：5vh；
边界半径：1.8vh；
边界宽度：0.1vh；
文本最后对齐：居中；
}

参考文献
选择。。。
A.
B
C
移除
高度：15vh并且它正在按预期工作。希望这有帮助。谢谢


标签{
字号：2.8vh；
显示：块；
页边距底部：0；
文本对齐：居中；
文本转换：大写；
线高：1.4；
}
.表格管制{
填充顶部：0；
填充底部：0；
字体大小：5vh；
边界半径：1.8vh；
边界宽度：0.1vh；
文本最后对齐：居中；
}

参考文献
选择。。。
A.
B
C
使用
行高：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;
}

使用
行高：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;
}

你好，海伦，谢谢你的回复。实际上，问题只是关于选择下拉列表。所有类型的输入字段、复选框和收音机看起来都很好。增加“选择”下拉列表的高度将使布局不对齐。我需要一些特定于选择下拉列表的内容。@SaurabhLP那么您只需将选择框作为目标即可。我更新了我的答案来反映这一点。你好，海伦，15vh太大了。我不能应用它。我只想要5vh里面的东西。有什么解决办法吗？我已经更新了答案。请看一下差异。@SaurabhLP如果您将线路高度设置为5vh会怎么样？我想你已经试过了？另外，你的新截图也不清楚。你没有说问题出在哪里。你好，海伦，谢谢你的回复。实际上，问题只是关于选择下拉列表。所有类型的输入字段、复选框和收音机看起来都很好。增加“选择”下拉列表的高度将使布局不对齐。我需要一些特定于选择下拉列表的内容。@SaurabhLP那么您只需将选择框作为目标即可。我更新了我的答案来反映这一点。你好，海伦，15vh太大了。我不能应用它。我只想要5vh里面的东西。有什么解决办法吗？我已经更新了答案。请看一下差异。@SaurabhLP如果您将线路高度设置为5vh会怎么样？我想你已经试过了？另外，你的新截图也不清楚。你没有说问题是什么。请用一些示例代码来扩展它，以显示你的意思。嗨，斯内哈，谢谢你的回答。删除“高度”属性后，下拉列表变得很大，在下拉列表中有额外的间距，高度我无法增加，因为所有类型的输入、复选框和收音机看起来都很好。您好@SaurabhLP，您希望字体大小仅为5vh还是可变？您好Sneha，是的，我也希望字体大小为5vh。完成@AonghasM。谢谢，请用一些示例代码来扩展它，以展示您的意思。嗨，斯内哈，谢谢您的回复。删除“高度”属性后，下拉列表变得很大，在下拉列表中有额外的间距，高度我无法增加，因为所有类型的输入、复选框和收音机看起来都很好。您好@SaurabhLP，您希望字体大小仅为5vh还是可变？您好Sneha，是的，我也希望字体大小为5vh。完成@AonghasM。谢谢你，不幸的是，它应该是有效的，这应该可以解决我的问题。但很抱歉，它根本不起作用。在我的情况下，线条高度根本不起作用……请你能和其他输入元素分享你想要的截图吗……我有。请看问题。请用其他元素（例如文本框和任何其他元素）截图，只是想比较其他元素之间的设计。。不幸的是，这就是为什么我的Karthik会成功的原因，这会解决我的问题。但是很抱歉