stackjlei stackjlei - 3 months ago 27
CSS Question

How do I change placeholder font size for bootstrap and bootstrap material design?

My jsfiddle here has links to bootstrap and bootstrap material design. I want to make the font for the input placeholder smaller but it just doesn't budget, even with input-placeholder for moz or webkit. Any suggestions would be greatly appreciated.

html



<form class="form form-group has-info col-md-4">
<input class="search-input form-control" placeholder=" . . . enter pokemon name" type="text">
<button type="submit" class="btn btn-info btn-raised " name="button">Search!</button>
</form>


css

::-webkit-input-placeholder {
font-size: 25px;
}

:-moz-placeholder { /* Firefox 18- */
font-size: 25px;
}

::-moz-placeholder { /* Firefox 19+ */
font-size: 25px;
}

:-ms-input-placeholder {
font-size: 25px;
}

Answer

Declare !important to override the styles

::-webkit-input-placeholder {
   font-size: 25px;
}

:-moz-placeholder { /* Firefox 18- */
      font-size: 25px;
}

::-moz-placeholder {  /* Firefox 19+ */
      font-size: 25px;
}

/* Overriding styles */

::-webkit-input-placeholder {
   font-size: 13px!important;
}

:-moz-placeholder { /* Firefox 18- */
      font-size: 13px!important;
}
::-moz-placeholder {  /* Firefox 19+ */
      font-size: 13px!important;
}
<input type="text" placeholder="Example..">