rails5 hrタグ 色がつかない

Question

現在railsを使い開発中なのですが<hr>を使い線を引こうと思ったところ色の指定が反映されませんでした。
色以外の幅などは変えることができました。
しかし下記のように<hr>を2つ付けた場合、下の線のみ色が反映されます。原因分かる方いましたらお願いします。

  <hr color="black">
  <hr color="black">

![

<hr>を2つ付けた場合は上記のようにグレーの線とブラックの線が出てきます。 1つのみにした場合は色が反映されずグレーの線になります。

＜追記＞
下記がHTMLとCSSになります。<hr>タグは
<%= f.fields_for :schedules do |f| %>の下についています。

<%= nested_form_for(@user) do |f| %>
  <% if user.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>

      <ul>
      <% user.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>


  <div class="field">
    <%= f.label "企業名" %>
    <%= f.text_field :company,class:"form-control",placeholder:"企業名" %>
  </div>
  
  <div class="field">
    <%= f.label "ユーザーID" %>
    <%= f.text_field :userid,class:"form-control",placeholder:"ユーザーID" %>
  </div>
  
  <div class="field">
    <%= f.label "パスワード" %>
    <%= f.text_field :pass,class:"form-control",placeholder:"パスワード" %>
  </div>
  
  <div class="field">
    <%= f.label "メモ" %>
    <%= f.text_field :memo,class:"form-control",placeholder:"メモ" %>
  </div>




  
  <%= f.fields_for :schedules do |f| %>
   <hr color="black">
  <div class="field">
    <%= f.collection_select :category_id,  @category, :id, :name,{:prompt => "予定を選択"},class:"form-control",id:"select-form"%>
    <%= f.text_field :time, class:"form-control",placeholder:"日程"%>
    </div>
    <div class="buttons">
    <%= f.link_to_remove do%>
    <span class="glyphicon glyphicon-trash"></span>
    </div>
    
    <% end %>
   <% end %>


  <%= f.link_to_add "予定の追加", :schedules, class:"button-4" %>
  <%= f.submit "作成",class:"button-4-1"%>


  
<% end %>

@import "bootstrap-sprockets";
@import "bootstrap";



#select-form {
  width:150px;
}


.container{
  width:800px;
  margin:0 auto;
}

.glyphicon{
    color: #F08080;

    
}

.buttons{
  text-align:right;
  text-decoration: none;
}


.new-back{
  margin-top:20px;

}

Answer 1

フォームのスタイルに指定されているからでは。（input + hr {}とかの指定があるのでは）

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

Comments

[kei344]

「グレーの線」はBootstrapのスタイル。むしろ黒いほうがどうなっているのかをデベロッパーツールで確認すべき。

[yu_yu]

回答ありがとうございます。デベロッパーツールで確認してみます！

[yu_yu]

デベロッパーツールを使い自分の目で確認したことで理解することができました！
classをつけて分けたことで黒の実線を行くことができました。
ありがとうございました！

Answer 2

ブートスラップの<hr>タグのカラーが反映されていたため、グレーになっていました。
classを付け分けたことで黒に変えることができました。

Answer 3

単純に再現ができません。提示のコード以外の要素（前後のhtmlやcss等）が原因と考えられます。
hr要素を入れる場所や数を変えてみて、どのような条件で質問の現象が発生するか、細かく調査してみてください。

Comments

[yu_yu]

回答いただきありがとうございます。追記でHTMLとCSSの載せさせていただきました。
1つ見つかった点としては「link_to_add 」を使いフォームの追加を数回行ったところ
4回目のみ<hr>タグの黒い線が現れました。それ以降は4回区切りで黒の実線が現れます。
それ以外はすべてグレーの実線になりました。