How to change a predeterminate underline color in an Input with Materialize w/Ruby on Rails

Question

I really try so hard to change the underline color but I can't, I don't know where do that, please help me! 🙏🙏

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

Answer 1

You can change the class .input-field , and add more specific selector, for example:

.input-field input

or to email type of input

.input-field input[type=email]

or to focused field:

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

And set the border style:

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

You can read more in Materialize documentation: http://materializecss.com/forms.html

EDIT: edited as suggested by @Toby1Kenobi

Answer 2

According to the docs you can change the underline colour in CSS by modifying the colour of border-bottom and box-shadow of the element containing the input element (that is the one with the class input-field )

so maybe it would be something like this:

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