Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fail to change placeholder color with Bootstrap 3

Two questions:

  1. I am trying to make the placeholder text white. But it doesn't work. I am using Bootstrap 3. JSFiddle demo

  2. Another question is how do I change placeholder color not globally. That is, I have multiple fields, I want only one field to have white placeholder, all the others remain in default color.

Thanks in advance.

html:

<form id="search-form" class="navbar-form navbar-left" role="search">     <div class="">         <div class="right-inner-addon"> <i class="icon-search search-submit"></i>             <input type="search" class="form-control" placeholder="search" />         </div>     </div> </form> 

css:

.right-inner-addon {     position: relative; } .right-inner-addon input {     padding-right: 30px;     background-color:#303030;     font-size: 13px;     color:white;  } .right-inner-addon i {     position: absolute;     right: 0px;     padding: 10px 12px;     /*  pointer-events: none; */     cursor: pointer;     color:white; }   /* do not group these rules*/ ::-webkit-input-placeholder { color: white; } FF 4-18  :-moz-placeholder           { color: white; }  FF 19+ ::-moz-placeholder          { color: white; }  IE 10+ :-ms-input-placeholder      { color: white; }  
like image 771
Ivan Wang Avatar asked Dec 25 '13 14:12

Ivan Wang


People also ask

How do I change the placeholder color in ionic 3?

You can edit the place holder color by overriding the ionic Sass variable. Check this link. You can assign $text-input-placeholder-color variable to the color you want.

How can I change placeholder color in bootstrap 4?

For Bootstrap 4, if you're using SCSS, just override variable $input-placeholder-color before you import bootstrap.

How can I change placeholder color?

<input type="text" placeholder="A red placeholder text..">


1 Answers

Assign the placeholder to a class selector like this:

.form-control::-webkit-input-placeholder { color: white; }  /* WebKit, Blink, Edge */ .form-control:-moz-placeholder { color: white; }  /* Mozilla Firefox 4 to 18 */ .form-control::-moz-placeholder { color: white; }  /* Mozilla Firefox 19+ */ .form-control:-ms-input-placeholder { color: white; }  /* Internet Explorer 10-11 */ .form-control::-ms-input-placeholder { color: white; }  /* Microsoft Edge */ 

It will work then since a stronger selector was probably overriding your global. I'm on a tablet so i cant inspect and confirm which stronger selector it was :) But it does work I tried it in your fiddle.

This also answers your second question. By assigning it to a class or id and giving an input only that class you can control what inputs to style.

like image 97
Dennis Puzak Avatar answered Sep 28 '22 10:09

Dennis Puzak