Rails 4 x Bootstrap 3：如何将自定义样式应用于选择字段答案

【问题标题】：Rails 4 x Bootstrap 3: how to apply custom style to select fieldRails 4 x Bootstrap 3：如何将自定义样式应用于选择字段
【发布时间】：2016-01-31 23:35:27
【问题描述】：

我正在使用 Rails 4 和 Bootstrap 3 构建一个 Web 应用程序。

在我的注册表单中，我有几个字段，包括 time_zone select：

<div class="field">
    <%= f.label :first_name, "FIRST NAME" %>
    <%= f.text_field :first_name, autofocus: true %>
</div>

<div class="field">
    <%= f.label :last_name, "LAST NAME" %>
    <%= f.text_field :last_name, autofocus: true %>
</div>

<div class="field">
    <%= f.label :time_zone, "TIME ZONE" %>
    <%= f.time_zone_select :time_zone, ActiveSupport::TimeZone.us_zones, :class => :timezone %>
</div>

我已经能够设置first_name 和last_name 字段的样式，但我似乎无法应用padding 或删除time_zone 字段的border-radius：

这是我在css 文件中的内容：

#user_first_name, #user_last_name {
    background-color: #f2f2f2;
    border: none;
    width: 100%;
    padding: 10px;
    margin: 5px 0px 10px 0px;
    display: inline-block;
}

#user_time_zone {
    background-color: #f2f2f2;
    border: none;
    width: 100%;
    margin: 5px 0px 10px 0px;
    padding: 10px;
    border-radius: 0;
}

如何使选择字段的样式与其他两个常规文本字段的样式相同？

【问题讨论】：

请提供jsfiddle。
好吧，我可以提供一个 JSFiddle，但不会有比我的问题中已经存在的更多的代码......除了默认的 Bootstrap 函数之外，我没有使用任何自定义 JavaScript。你到底需要什么？
Jsfiddle 让您更容易理解并快速解决问题。
我很乐意分享我拥有的任何代码。除了我的问题已经存在的内容之外，我只是不确定我还能提供什么......你需要什么？
这个我可以发给你，但是因为我们不在Rails环境中，所以不能正常工作：jsfiddle.net/7vg9exg5

标签： css ruby-on-rails twitter-bootstrap ruby-on-rails-4 drop-down-menu

【解决方案1】：

我检查了您的 jsfiddle 链接，您的时区选择似乎没问题。（参考附图）

【讨论】：