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

Question

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 1

Add !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..">