[英]How to change a predeterminate underline color in an Input with Materialize w/Ruby on Rails
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>
You can change the class .input-field
, and add more specific selector, for example: 您可以更改类
.input-field
,并添加更具体的选择器,例如:
.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 您可以在Materialize文档中阅读更多信息: http : //materializecss.com/forms.html
EDIT: edited as suggested by @Toby1Kenobi 编辑:由@ Toby1Kenobi建议编辑
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
) 根据文档,您可以通过修改包含输入元素的元素(即具有类
input-field
的元素)的border-bottom
和box-shadow
的颜色来更改CSS中的下划线颜色。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.