title: Why is the placeholder text in my search bar not appearing in Firefox
body: <p>I have a cross browser issue in which the placeholder text that is nested in my search bar of my Rails app does not appear in Mozilla despite working terrific in all other browsers. </p>
  
  <p>I have looked around for an answer without success.</p>
  
  <h2>Search bar rendered in Safari, Chrome and Opera.</h2>
  
  <p><a href="https://i.stack.imgur.com/gkOuy.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gkOuy.jpg" alt="Search bar rendered in Safari, Chrome and Opera"></a></p>
  
  <h2>Search bar rendered using Firefox.</h2>
  
  <p><a href="https://i.stack.imgur.com/g061K.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g061K.jpg" alt="Search bar rendered using Firefox"></a></p>
  
  <h2>_header.html.erb</h2>
  
  <pre><code>&lt;nav class="navbar navbar-static-top navbar-default" role="navigation"&gt;
    &lt;div class="container"&gt;
    &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
    &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="/"&gt;
        &lt;%= image_tag('nippon.svg', alt: "Nippon Beauty", class: "navbar-brand-icon") %&gt;
      &lt;/a&gt; 
    &lt;/div&gt;
  
        &lt;input type="text" class="searchTerm" placeholder="What type of Skincare product would you like?"&gt;
  
    &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
    &lt;div class="collapse navbar-collapse navbar-ex1-collapse"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li&gt;&lt;%= link_to "Home", root_path %&gt;&lt;/li&gt;
        &lt;li&gt;&lt;%= link_to "About", about_path %&gt;&lt;/li&gt;
        &lt;li&gt;&lt;%= link_to "Login", new_user_session_path %&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;%= link_to "Signup", new_user_registration_path %&gt;&lt;/li&gt;
        &lt;% if user_signed_in? %&gt;
          &lt;li&gt;&lt;%= link_to "Account Settings", edit_user_registration_path %&gt;&lt;/li&gt;
          &lt;li&gt;&lt;%= link_to "Log out", destroy_user_session_path, method: :delete %&gt;&lt;/li&gt;
        &lt;% else %&gt;
      &lt;% end %&gt;
      &lt;/ul&gt;
    &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre class="lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Open+Sans);
  
   body{
     font-family: 'Open Sans', sans-serif;
   }
  
  
   .searchTerm {
     position: absolute;
     left: 550px;
     top: 20px;
     width: 370px;
     border: 15px;
     background: #F2F2F2;
     padding: 25px;
     height: 40px;
     border-radius: 8px;
   }
  </code></pre>