如何正确调整选择表单输入的大小

I have a form which uses both text fields as well as select options. I styled the form using the following CSS:

我有一个表单,它既使用文本字段,也使用选择选项。我使用以下CSS设置了表单样式:

input[type=text] {
    width: 250px;
    height: 30px;
    text-indent: 10px;
    border-width: 3px;
    border-color: rgba(50, 50, 50, 0.14);
    margin: 10px 10px 10px 0px;
    padding: 5px 5px 5px 5px;
}

select {
    width: 250px;
    height: 30px;
    border-width: 3px;
    border-color: rgba(50, 50, 50, 0.14);
    margin: 10px 10px 10px 0px;
}

The problem is that for some reason, the select options are not properly using the width and height. The actual select box is rather small is comparison to the text fields. They end up like:

问题是由于某种原因,选择选项没有正确使用宽度和高度。与文本字段相比,实际的选择框相当小。他们最终像:

How can I properly resize a select option using CSS to make it have the same size as text fields? I tried using the width and height as shown above, but this does not give me the desired effect.

如何使用CSS正确调整选择选项的大小以使其与文本字段具有相同的大小?我尝试使用如上所示的宽度和高度,但这并没有给我所需的效果。

1 个解决方案

#1

try this:

select {
    min-width:265px;
    min-height: 45px;
    border-width: 3px;
    border-color: rgba(50, 50, 50, 0.14);
    margin: 10px 10px 10px 0px;
}