Styling Twitter's Bootstrap 3.x Buttons - css

Twitter's Bootstrap 3 buttons are limited in colors. By default there will be 5 7 colors (default primary, error, warning, info, success and link) See:
Every button got 3 state (default, active and disabled)
How to add more colors or create custom buttons? This question is already answered for Twitter's Bootstrap 2.x: Styling twitter bootstrap buttons. Bootstrap 3 is not backwards compatible. There will be lot of changes in the less and css files. Support for IE7 will be dropped. TB3 is mobile first. Markup codes will be changed too.

Add extra colors to your less files and recompile. Also see Twitter Bootstrap Customization Best Practices.
update
As mentioned by #ow3n since v3.0.3 use:
.btn-custom {
.button-variant(#btn-default-color; #btn-default-bg; #btn-default-border);
}
Note in the above #btn-default-color sets the font color,#btn-default-bg the background color and #btn-default-border the color of the border. Colors for states like active, hover and disabled are calculated based on of these parameters.
For example:
.btn-custom {
.button-variant(blue; red; green);
}
will result in:
For who want to use the CSS direct, replace the colors in this code:
.btn-custom {
color: #0000ff;
background-color: #ff0000;
border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
color: #0000ff;
background-color: #d60000;
border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
background-color: #ff0000;
border-color: #008000;
}
.btn-custom .badge {
color: #ff0000;
background-color: #0000ff;
}
end update
To generate a custom button:
.btn-custom {
.btn-pseudo-states(#yourColor, #yourColorDarker);
}
The above will generate the following css:
.btn-custom {
background-color: #1dcc00;
border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
background-color: #19b300;
border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
background-color: #1dcc00;
border-color: #1dcc00;
}
In the above #1dcc00 will be your custom color and #19b300 your darker color. In stead of the less solution you also can add this css direct to your html files (after the bootstrap css).
Or get your css code direct from Twitter's Bootstrap 3 Button Generator

It's quite easy to do this with unprocessed css as well
CSS
.btn-purple {
background: #9b59b6;
border-color: #9b59b6;
}
.btn-purple:hover {
background: #8e44ad;
border-color: #8e44ad;
}
.btn-teal {
background: #1abc9c;
border-color: #1abc9c;
}
.btn-teal:hover {
background: #16a085;
border-color: #16a085;
}
HTML
<button class="btn btn-purple">purple</button>
<button class="btn btn-teal">teal</button>
Fiddle at: http://jsfiddle.net/z7hV6/

After finding this solution via google and understanding the bootstrap buttons better I found the following tool to generate different colours for bootstrap buttons.
It does mean you'll have to add this to a separate css but it's perfect for what I needed. Here's hoping it's useful to others:
http://twitterbootstrap3buttons.w3masters.nl/

Here is a nice and easy way to style up additional Bootstrap button colors
Bootstrap Button Generator
Below is a sample of the CSS it will generate:
.btn-sample {
color: #ffffff;
background-color: #611BBD;
border-color: #130269;
}
.btn-sample:hover,
.btn-sample:focus,
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
color: #ffffff;
background-color: #49247A;
border-color: #130269;
}
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
background-image: none;
}
.btn-sample.disabled,
.btn-sample[disabled],
fieldset[disabled] .btn-sample,
.btn-sample.disabled:hover,
.btn-sample[disabled]:hover,
fieldset[disabled] .btn-sample:hover,
.btn-sample.disabled:focus,
.btn-sample[disabled]:focus,
fieldset[disabled] .btn-sample:focus,
.btn-sample.disabled:active,
.btn-sample[disabled]:active,
fieldset[disabled] .btn-sample:active,
.btn-sample.disabled.active,
.btn-sample[disabled].active,
fieldset[disabled] .btn-sample.active {
background-color: #611BBD;
border-color: #130269;
}
.btn-sample .badge {
color: #611BBD;
background-color: #ffffff;
}

I have been looking for a possible solution for quite a while to stylize bootstrap buttons. I followed the latest css style language (less http://lesscss.org/), and quite a few workarounds to customize the buttons, but none of them were useful. There are quite amazing bootstrap button generators available online such as http://www.plugolabs.com/twitter-bootstrap-button-generator/ and many more. But to my surprise meagerly one line of code in the css file worked decently well for me. (Note: Instead of "background-color", I have used "background" as parameter to specify the name of the button color. In the html code, I have used btn-custom as the class name which I have redefined in the css file.)
HTML Code
<a href="#" target="_blank" class="btn btn-custom pull-right">
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>
CSS Code
.btn-custom {
background: #colorname;
}

Here's another alternative with the advantage that you can add as many "button actions" (colors) as you want. Here's short demo video: Using Unicorn-UI Buttons with Twitter Bootstrap
If you grab the library and compile yourself, you can defined as many "button actions" by editing a Sass list that looks like:
$ubtn-colors: ('primary' #1B9AF7 #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37 #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default;
Adding as many custom types as you'd like (and of course also removing those you don't need).

Related

What does 'default' keyword mean with css variables?

I've come across following syntax:
border-color: var(--disabled) default;
which is not correctly interpreted by my css minifier (it believes it is alternating colors - top-bottom & left-right).
Unfortunately, I cannot find any documentation on the css feature.
Can anyone point me to the feature name / documentation?
See it in action (I tested it on Chrome):
:root {
--disabled: #0000DD;
}
.status-parent {
color: red;
}
.status {
border-width: 5px;
border-style: solid;
border-color: var(--disabled) default;
}
<p class="status-parent">
<span class="status">I have red border</span>
</p>
border-color does not have a default value. Therefore this rule is ignored by the browser.
There is no problem with your CSS Variables. Below is the same code with default replaced by yellow :
:root {
--dissabled: #0000DD;
}
.status-parent {
color: red;
}
.status {
border-width: 5px;
border-style: solid;
border-color: var(--dissabled) yellow;
padding:0.5rem;
}
<p class="status-parent">
<span class="status">I have red border</span>
</p>
Because the CSS specifity of .status overrides the parent color for the border you will see that the variable (blue) does the top- and bottom- and the second argument yellow does the left- and right- borders.

How to change btn color in Bootstrap

Is there a way to change all .btn properties in Bootstrap? I have tried below ones, but still sometimes it shows the default blue color (say after clicking and removing the mouse etc). How can I change the entire theme altogether?
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #8064A2;
}
If you want to override any default properties in Bootstrap you have to make the properties as important.
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #8064A2 !important;
}
I hope this works for you.
2022 Update for Bootstrap 5
Bootstrap 5 has the same button-variant and button-outline-variant SASS mixins which can be used to customize the button color after bootstrap is imported...
/* import the Bootstrap */
#import "bootstrap";
/* ------- customize primary button color -------- */
$mynewcolor:#77cccc;
.btn-primary {
#include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
.btn-outline-primary {
#include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}
https://codeply.com/p/UNvB5hRsfF
2019 Update for Bootstrap 4
Now that Bootstrap 4 uses SASS, you can easily change the primary button color using the button-variant mixins:
$mynewcolor:#77cccc;
.btn-primary {
#include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
.btn-outline-primary {
#include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}
https://codeply.com/p/JnV3xDDiaH (SASS demo)
This SASS compiles into the following CSS...
.btn-primary {
color: #212529;
background-color: #7cc;
border-color: #5bc2c2
}
.btn-primary:hover {
color: #212529;
background-color: #52bebe;
border-color: #8ad3d3
}
.btn-primary:focus,
.btn-primary.focus {
box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}
.btn-primary.disabled,
.btn-primary:disabled {
color: #212529;
background-color: #7cc;
border-color: #5bc2c2
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
color: #212529;
background-color: #9cdada;
border-color: #2e7c7c
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}
.btn-outline-primary {
color: #7cc;
background-color: transparent;
background-image: none;
border-color: #7cc
}
.btn-outline-primary:hover {
color: #222;
background-color: #8ad3d3;
border-color: #7cc
}
.btn-outline-primary:focus,
.btn-outline-primary.focus {
box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
color: #7cc;
background-color: transparent
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
color: #212529;
background-color: #8ad3d3;
border-color: #7cc
}
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}
https://codeply.com/go/lD3tUE01lo (CSS demo)
To change the primary color for all classes see: Customizing Bootstrap CSS template and How to change the bootstrap primary color?
The easiest way to see which properties you need to override is to take a look at Bootstrap's source code, specifically the .button-variant mixin defined in mixins/buttons.less. You still need to override quite a lot of properties to get rid of all of the .btn-primary styling (e.g. :focus, disabled, usage in dropdowns etc).
A better way might be to:
Create your own customized version of Bootstrap using Bootstrap's online customization tool
Manually create your own color class, e.g. .btn-whatever
Use a LESS compiler and use the .button-variant mixin to create your own color class, e.g. .btn-whatever
I guess you forgot .btn-primary:focus property and comma after .btn-primaryYou also can use less and redefine some colors in variables.less fileWith this in mind your code will be look like this:
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: #8064A2;
border-color: #8064A2;
}
Just create your own button on:
http://blog.koalite.com/bbg/
add the CSS at the end off your boottrap.min.css
Cheers
Remove the button color class like "btn-success" and put a custom class like "btn-custom" and write css for that class. That simply works for me.
HTML :
<button class="btn btn-block login " type="submit">Sign In</button>
CSS:
.login {
background-color: #0057fc;
color: white;
}
The simplest way is to:
intercept every button state
add !important to override the states
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: black !important;
border-color: black !important;
}
OR the more practical UI way is to make the hover state of the button darker than the original state. Just use the CSS snippet below:
.btn-primary {
background-color: Blue !important;
border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: DarkBlue !important;
border-color: DarkBlue !important;
}
You have missed one style ".btn-primary:active:focus" which causes that still during btn click default bootstrap color show up for a second.
This works in my code:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}
Here's my flavor without the loss of hover. I personally like it better than the standard bootstrap transitioning.
.btn-primary,
.btn-primary:active,
.btn-primary:visited {
background-color: #8064A2 !important;
}
.btn-primary:hover {
background-color: #594671 !important;
transition: all 1s ease;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>
I had run into the similar problem recently, and managed to fix it with adding classes
body .btn-primary {
background-color: #7bc143;
border-color: #7bc143;
color: #FFF; }
body .btn-primary:hover, body .btn-primary:focus {
border-color: #6fb03a;
background-color: #6fb03a;
color: #FFF; }
body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
border-color: #639d34;
background-color: #639d34;
color: #FFF; }
Also pay attention to [disabled] and [disabled]:hover, if this class is used on input[type=submit]. Like this:
body .btn-primary[disabled], body .btn-primary[disabled]:hover {
background-color: #7bc143;
border-color: #7bc143; }
Adding a step-by-step guide to #Codeply-er's answer above for SASS/SCSS newbies like me.
Save btnCustom.scss.
/* import the necessary Bootstrap files */
#import 'bootstrap';
/* Define color */
$mynewcolor:#77cccc;
.btn-custom {
#include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
.btn-outline-custom {
#include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}
Download a SASS compiler such as Koala so that SCSS file above can be compiled to CSS.
Clone the Bootstrap github repo because the compiler needs the button-variant mixins somewhere.
Explicitly import bootstrap functions by creating a _bootstrap.scss file as below. This will allow the compiler to access the Bootstrap functions and variables.
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/root";
#import "bootstrap/scss/reboot";
#import "bootstrap/scss/type";
#import "bootstrap/scss/images";
#import "bootstrap/scss/grid";
#import "bootstrap/scss/tables";
#import "bootstrap/scss/forms";
#import "bootstrap/scss/buttons";
#import "bootstrap/scss/utilities";
Compile btnCustom.scss with the previously downloaded compiler to css.
A lot of complex and lengthy CSS here when all you need is this if you want to cover the whole button with one color including the button border:
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
background-color: #D64B8A !important;
border-color: #D64B8A !important;
}
You can add custom colors using bootstrap theming in your config file for example variables.scss and make sure you import that file before bootstrap when compiling.
$theme-colors: (
"whatever": #900
);
Now you can do .btn-whatever
I think using !important is not a very wise option. It may cause for many other issues specially when making the site responsive. So, my understanding is that, the best way to do this to use custom button CSS class with .btn bootstrap class. .btn is the base style class for bootstrap button. So, keep that as the layout, we can change other styles using our custom css class.
One more extra thing I want to mention here. Some people are trying to remove blue outline from the buttons. It's not a good idea because that accessibility issue when using keyboard. Change it's color using outline-color: instead.
I am not the OP of this answer but it helped me so:
I wanted to change the color of the next/previous buttons of the bootstrap carousel on my homepage.
Solution:
Copy the selector names from bootstrap.css and move them to your own style.css (with your own prefrences..) :
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 100px;
width: 100px;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
border: 1px solid black;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '>';
font-size: 55px;
color: red;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 55px;
color: red;
}
Here is my participation for the "outline" button:
Replace #8e5b5b with your color and #b3a7a7 by your color but usually more bright.
.btn-outline-custom{
color: #8e5b5b;
border-color: #8e5b5b;
}
.btn-outline-custom:focus{
box-shadow: 0 0 0 0.2rem #b3a7a7;
-webkit-box-shadow: 0 0 0 0.2rem #b3a7a7;
outline: 0;
}
.btn-outline-custom:hover,
.btn-outline-custom:active{
color: #fff;
background-color: #8e5b5b;
border-color: #8e5b5b;
}
As of Bootstrap 5, the right way to do this is to simply override the $primary theme colour:
Simply add the following to your Bootstrap overrides file (ie: could be named 'Core.scss' for example:
//
// Bootstrap
//
// overrides
$primary: /*new colour*/orange;
Here is the official docs: https://getbootstrap.com/docs/5.0/customize/sass/#modify-map

Confused about overriding CSS styles

I understand CSS basics, but I keep running into trouble with conflicting styles. Consider the following styles.
First, the default font color in my style sheets is black. I want that color applied to all picture captions - unless they're contained in divs with a class CoolL or CoolR...
.CoolL .Caption, .CoolR .Caption { color: #900; }
Now all the captions in the Cool series have brown text. But there are situations where I want the captions to have a black background with white text, so I created this rule:
.Black { background: #000; color: #fff; }
Now consider the following HTML. Class Caption by itself should have black text. However, this is inside a div with a class CoolR, so it displays brown text instead. But I added the class Black to the last div, which should change the background to black and the text color to white...
<div class="CoolR Plus Max300">
<div class="Shadow2">
<img src="">
<div class="Caption Black">Text</div>
</div>
</div>
In fact, the background is displaying black, but the text color is still brown.
I get these problems all the time, and the only way I can fix them is to write long, detailed styles, like this...
.Black, .Caption .Black, .CoolR .Caption.Black, .EverythingElseThatCouldBeBlack .Black { background: #000; color: #fff; }
What am I missing? Thanks.
I think you are over complicating things. This will become a maintenance issue as you add more styles. I would define separate classes and keep things simple. It's also important to understand CSS specificity.
.caption {
color: #000;
}
.cool-caption {
color: #900;
}
.caption-with-background {
background-color: #000;
color: #fff;
}
You could try :
.Black { background: #000 !important; color: #fff !important; }
There are a few fixes, but as previously recommended you should mark all of the settings you want to override previous ones with !important. With that, your code would look like this:
.Black {
background: #000;
color: #fff;
}
Also, not sure if you asked this, but you can apply CSS to all components by using the *, like so:
* {
//blahblahblah
}
you are defining the first case with a descendant selector which overrides the second class, which is merely a class. every answer given already will work but are entirely unnecessary. just add this to your style sheet:
.CoolR1 .Black, .Black{ background: #000; color: #fff;}
/** you could also chain your classes for specificity power **/
.Black.Caption{color:#fff}
that should do it. you can read more about selectors here:
http://docs.webplatform.org/wiki/css/selectors
I think that generally a more specific rule overrides a more general one, thus the more specific '.CoolR .Caption' is overriding the more general .Black. You'll probably be able to override this with !important, but a better style might be to reduce the complexity of your rules:
.Cool .caption { color: #900; }
.Cool .caption.black { color: background: #000; color: #fff; }
And put .L and .R in separate classes
.Cool.L { . . . } /* For things specific to CoolL, but not CoolR */
.Cool.R { . . . } /* and vice-versa */

how to override mailchimp button css

I am trying to override mail chimp css
if I add inline css like
<input type="submit" value="SUBSCRIBE" background: #111; name="subscribe" id="mc-embedded-subscribe" class="button">
this is working fine.
In this case, I am unable to use :hover along with mc-embedded-subscribe id.
I mean if I write
#mc-embedded-subscribe .button {
background: #222;
}
This is not working, also
#mc-embedded-subscribe input.button {
background: #222;
}
is not working.
Please let me know how to make color change on hover for subscribe button in mailchimp,
Thanks
Try adding !important to ensure your background rule isn't being overridden. Is something else has higher specificity your CSS will be ignored.
#mc-embedded-subscribe:hover {
background: #222 !important;
}
Your CSS code is set to find a child (.button) of #mc-embedded-subscribe. When really, they are the same thing as the button has a class and id.
Just do:
#mc-embedded-subscribe {
background: #111;
}
#mc-embedded-subscribe:hover {
background: #555;
}
See here: http://jsfiddle.net/UteLC/3/
If that isn't working, you may need to add the !important so that your css overrides the default MailChimp css like this:
#mc-embedded-subscribe:hover {
background: #555!important;
}
Just add "!important" at both places, it worked for me.
For example:
#mc-embedded-subscribe {
background: #111!important;
}
#mc-embedded-subscribe:hover {
background: #555!important;
}
You can see it live at this blog.
Just click on any post and look at the sidebar for the redesign in action.
Hope this helps.

fail to change placeholder color with Bootstrap 3

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.
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; }
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.
There was an issue posted here about this: https://github.com/twbs/bootstrap/issues/14107
The issue was solved by this commit: https://github.com/twbs/bootstrap/commit/bd292ca3b89da982abf34473318c77ace3417fb5
The solution therefore is to override it back to #999 and not white as suggested (and also overriding all bootstraps styles, not just for webkit-styles):
.form-control::-moz-placeholder {
color: #999;
}
.form-control:-ms-input-placeholder {
color: #999;
}
.form-control::-webkit-input-placeholder {
color: #999;
}
A Possible Gotcha
Recommended Sanity Check - Make sure to add the form-control class to your inputs.
If you have bootstrap css loaded on your page, but your inputs don't have the
class="form-control" then placeholder CSS selector won't apply to them.
Example markup from the docs:
I know this didn't apply to the OP's markup but as I missed this at first and spent a little bit of effort trying to debug it, I'm posting this answer to help others.
I'm using Bootstrap 4 and Dennis Puzak's solution does not work for me.
The next solution works for me
.form-control::placeholder { color: white;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: white; } /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: white; } /* Microsoft Edge*/
Bootstrap has 3 lines of CSS, within your bootstrap.css generated file that control the placeholder text color:
.form-control::-moz-placeholder {
color: #999999;
opacity: 1;
}
.form-control:-ms-input-placeholder {
color: #999999;
}
.form-control::-webkit-input-placeholder {
color: #999999;
}
Now if you add this to your own CSS file it won't override bootstrap's because it is less specific. So assmuning your form inside a then add that to your CSS:
form .form-control::-moz-placeholder {
color: #fff;
opacity: 1;
}
form .form-control:-ms-input-placeholder {
color: #fff;
}
form .form-control::-webkit-input-placeholder {
color: #fff;
}
Voila that will override bootstrap's CSS.
The others did not work in my case (Bootstrap 4). Here is the solution I used.
html .form-control::-webkit-input-placeholder { color:white; }
html .form-control:-moz-placeholder { color:white; }
html .form-control::-moz-placeholder { color:white; }
html .form-control:-ms-input-placeholder { color:white; }
If we use a stronger selector (html first), we don't need to use the hacky value !important.
This overrides bootstraps CSS as we use a higher level of specificity to target .form-control elements (html first instead of .form-control first).
I think qwertzman is on the right track for the best solution to this.
If you only wanted to style a specific placeholder, then his answer still holds true.
But if you want to override the colour of all placeholders, (which is more probable) and if you are already compiling your own custom Bootstrap LESS, the answer is even simpler!
Override this LESS variable:
#input-color-placeholder
Boostrap Placeholder Mixin:
#mixin placeholder($color: $input-color-placeholder) {
// Firefox
&::-moz-placeholder {
color: $color;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
&:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: $color; } // Safari and Chrome
}
now call it:
#include placeholder($white);
You should check out this answer : Change an HTML5 input's placeholder color with CSS
Work on most browser, the solution in this thread is not working on FF 30+ for example
With LESS the actual mixin is in vendor-prefixes.less
.placeholder(#color: #input-color-placeholder) {
...
}
This mixin is called in forms.less on line 133:
.placeholder();
Your solution in LESS is:
.placeholder(#fff);
Imho the best way to go. Just use Winless or a composer compiler like Gulp/Grunt works, too and even better/faster.

Resources