0

I am newish to front end design and have created a landing page on my rails application which has a search bar in the header.

The search bar renders great in all browsers except for Safari which skews the placeholder to the right compromising the look of my design.

Is their such a thing as configuring a stylesheet specifically for safari so that I can resolve this aesthetic anomoly or does the issue lie in the coding of my header.

enter image description here enter image description here

_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;
}
Chris Dormani
  • 476
  • 8
  • 21

0 Answers0