Question

我对前端设计很新，并且在我的rails应用程序上创建了一个登录页面，标题中有一个搜索栏。

搜索栏在所有浏览器中呈现出色，除了Safari，它会使占位符偏向正确，从而影响我的设计外观。

他们是否为配置专门用于safari的样式表这样的事情，以便我可以解决这种审美的异常或问题在于我的标题的编码。

_header.html.erb

<nav class="navbar navbar-static-top navbar-default" role="navigation">
  <div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
      <img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg">
    </a>
  </div>


  <div class="wrap">
    <div class="search">
      <input type="text" class="searchTerm" placeholder="What type of Skincare product would you like?">
      <button type="submit" class="searchButton">
        <i class="fa fa-search"></i>
      </button>
    </div>
  </div>

  <!--<span style="color: #53100e">| Japanese and South Korean Luxury Skincare</span> 

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav navbar-right">
      <li><%= link_to "Home", root_path %></li>
      <li><%= link_to "About", about_path %></li>
      <li><%= link_to "Login", new_user_session_path %></li> 
      <li><%= link_to "Signup", new_user_registration_path %></li>
      <% if user_signed_in? %>
        <li><%= link_to "Account Settings", edit_user_registration_path %></li>
        <li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
      <% else %>
    <% end %>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

CSS

/*=========================
  search bar 
 ================= */

 @import url(https://fonts.googleapis.com/css?family=Open+Sans);

 body{
   font-family: 'Open Sans', sans-serif;
 }

 .search {
   width: 100%;
   position: relative;
 }

 .searchTerm {
   float: left;
   width: 100%;
   border: 15px;
   background: #F2F2F2;
   padding: 5px;
   height: 40px;
   border-radius: 8px;
 }

 .searchTerm:focus{
   color: #000000;
 }


 .searchButton {
   position: absolute;  
   right: -50px;
   width: 40px;
   height: 40px;
   background: #a0616d;
   text-align: center;
   color: #fff;
   border-radius: 5px;
   cursor: pointer;
   font-size: 20px;
 }



 /*Resize the wrap to see the search bar change!*/

 .wrap{
   width: 35%;
   position: absolute;
   top: 69%;
   left: 45%;
   transform: translate(-50%, -50%);
 }

 /*This code beneath puts the glow round the search placeholder!*/

textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {   
    border-color: rgba(160, 97, 109, 0.8);
    box-shadow: 0 1px 1px rgba(160, 97, 109, 0.075) inset, 0 0 13px rgba(160, 97, 109, 0.6);
    outline: 0 none;
}

为safari配置样式表

0 个答案: