如何更改嵌套在輸入搜索的佔位符內的文本的字體顏色

Question

我正在努力弄清楚如何更改嵌入在我的rails中輸入搜索欄的佔位符內的文本的字體顏色4.2.4應用程序。

我在CSS中嘗試了一些沒有成功的東西。

我的頭

<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; 
} 

Answer 1

你可以這樣做：

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

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

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

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

Fiddle