选择框格式化CSS

Question

我的表格来自Michael Hartl的ruby on rails教程，但我添加了collection_select，看起来有点傻：

生成输入框的CSS是

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
}

input {
  height: auto !important;
}

这也是我在CSS中弹出选择的唯一实例。我尝试将select添加到第二个输入块，但这并没有改变任何东西。这3个框的代码是

<%= f.label :email %>
<%= f.email_field :email, class: 'form-control' %>

<%= f.label :unit %>
<%= f.collection_select :unit, @units, :id, :name, prompt: true %>

<%= f.label :phone %>
<%= f.text_field :phone, class: 'form-control' %>

我的表单生成的HTML是

<input class="form-control" type="email" name="user[email]" id="user_email">
<select name="user[unit]" id="user_unit">
  <option value="">Please select</option>
  <option value="2">...</option>
  <option value="3">...</option>
</select>
<input class="form-control" type="text" name="user[phone]" id="user_phone">

如何选择与文本框相同的外观？

Answer 1

按如下方式更改CSS，

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  @include box_sizing;
  padding: 5px 0;
}

input {
  height: auto !important;
}

添加填充是控制表单元素高度的最佳方法。

Answer 2

您没有设置height of the select：

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  margin-bottom: 15px;
  border-radius: 3px;
  @include box_sizing;
}

input,select {
  height: 25px;
}

input:hover,
input:focus,
select:hover,
select:focus {
  outline: none;
}