How do I change the font colour of text nested within a placeholder of an input search [duplicate]


Tags: html,css,css3

Problem :

This question already has an answer here:

I am struggling to figure out how I can change the font colour of text nested within a placeholder of an input search bar in my rails 4.2.4 app.

I have tried a few things in the CSS without success.

enter image description here

My header

<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: #00B5CC;
 }


 .searchButton {
   position: absolute;  
   right: -50px;
   width: 40px;
   height: 36px;
   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: 68%;
   left: 45%;
   transform: translate(-50%, -50%);
 }

textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus {   
    border-color: rgba(229, 103, 23, 0.8);
    box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6);
    outline: 0 none;
}


Solution :

You can do like this :

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

Fiddle


    CSS Howto..

    CSS how to make a perfectly alligned left (or right) border?

    Can someone explain or show how to combine a bootstrap 3 collapsing top nav and and offcanvas side nav?

    How do I get Slick carousel to work? [closed]

    How to attach an element on the dynamically created div

    Bootstrap 3 - How to maximize input width inside navbar

    how to center columns group

    How to reference CSS children [duplicate]

    How to remove blue underline on text in Chrome - CSS?

    How to have 100% width for last column only in html and css?

    How to make a css media query snippet in ATOM editor

    How to manage css of big websites within team environment without mess?

    Jquery - How to alternate an :Odd :Even pattern every 4 ?

    How to draw a CSS petagon with all borders radius?

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    CSS Overflow, the scroll bar appears at the bottom, how can I get a scroll bar at the top?

    Simple Form button submit doesn't show in IE 8-7

    How to make slanted ribbon

    How to get rid of !important tags?

    CSS - How to create a table cell with a two-colour background?

    How do I center a div along the y axis?

    how to diplay two html elements seemlessly

    How to create table by using div

    How to set a image/icon width that was specified through css content property?

    How can I workaround this CSS anomaly?

    How to find out an element with id partially matched, and change its css style?

    How do I set a cell background colour based on its contents using PHP after reading values from MySQL?

    CSS Web fonts how to use it with use of @font-face its not working

    How to change the position of the JQuery dialog box

    how to change element css class runtime using javascript

    div under div - dont know how to do this