safariとchromeで色が変化しまってそこから変わらなくなってしまっている。

Question

今現在、safariとchromeで同じ形式のページを作ろうとしているのですが、safariの方で、色が変わってしまい、そこから直すことができない状態にいます。もし分かる方がいらしたら、どうぞ教えていただきたいです。

Safari

Chrome

<div class="middle-container">
          <div class="search">
             <%= form_tag plans_path, :method => 'get', :class => 'search' do %>
                   <p class="search_answer"><%= text_field_tag "title", "", class: "question" %>
                   <%= submit_tag "Search", :name => nil, class: "answer" %></p>
             <% end %>
          </div>
</div>

.middle-container {
  height: 400px;

}
form.search {
  height: 400px;
  padding-top: 280px;
  padding-left: 280px;
  
}

p.search_answer {
  font-size: 40px;
  margin-top: 0px;
  margin-bottom: 0px;

}

input.answer {

  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 2px white;
  border-radius: 3px;
  transition: .4s;

}

input.question {

  width: 700px;
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #67c5ff;
  border: solid white;
  border-radius: 3px;
  transition: .4s;

}

Comments

[cerfweb]

再現できるhtmlを提示していただけますか。

Answer 1

ご提示いただいたソースのみで判断する限り、ボタンに背景色が設定されていないのでブラウザのデフォルト色が適用されているのではと思われます。input.answerに

background: #fff;  /* 色はご自由に指定してください。 */

のように背景の指定を追加すれば統一できるはずです。

Comments

[avicii]

backgroundの色を変えたら、変わりました。ありがとうございます!!