Two questions:
I am trying to make the placeholder text white. But it doesn't work. I am using Bootstrap 3. JSFiddle demo
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; }
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.
For Bootstrap 4, if you're using SCSS, just override variable $input-placeholder-color before you import bootstrap.
<input type="text" placeholder="A red placeholder text..">
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With