如何使用 Materialize w/Ruby on Rails 更改输入中的预定下划线颜色答案

【问题标题】：How to change a predeterminate underline color in an Input with Materialize w/Ruby on Rails如何使用 Materialize w/Ruby on Rails 更改输入中的预定下划线颜色
【发布时间】：2018-04-26 16:59:39
【问题描述】：

我真的很努力地改变下划线颜色但我不能，我不知道在哪里做，请帮助我！ ??????????

      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          <%= form_for(:session, url: login_path) do |f| %>

          <%= f.label :email %>
          <%= f.email_field :email, class: 'form-control white-text' %>
          <br>
          <%= f.label :password %>
          <%= f.password_field :password, class: 'form-control white-text' %>
          <br>


          <%= f.submit "Log in", class: "btn" ,style:"color:white;background-color: #EEB756;" %>
          <% end %>

        </div>
      </div>

【问题讨论】：

标签： html css ruby-on-rails materialize

【解决方案1】：

根据docs，您可以通过修改包含输入元素的元素的border-bottom和box-shadow的颜色来更改CSS中的下划线颜色（即类input-field）

所以可能是这样的：

.input-field input[type=email] {
   border-bottom: 1px solid red;
   box-shadow: 0 1px 0 0 red;
}

【讨论】：

【解决方案2】：

您可以更改类.input-field，并添加更具体的选择器，例如：

.input-field input

或电子邮件输入类型

.input-field input[type=email]

或聚焦领域：

.input-field input[type=text]:focus

并设置边框样式：

.input-field input[type=text]:focus{
     border-bottom: 1px solid #aaa;
}

您可以在 Materialize 文档中阅读更多内容：http://materializecss.com/forms.html

编辑：按照@Toby1Kenobi 的建议进行编辑

【讨论】：

你打败了我！在这种情况下你不应该使用[type=email]吗？
文档似乎也建议修改 box-shadow 属性
@Toby1Kenobi 你是对的，[type=email] 选择器可以使用。是的，快一点:)