如何更改引导和引导材料设计的占位符字体大小？答案

【问题标题】：How do I change placeholder font size for bootstrap and bootstrap material design?如何更改引导和引导材料设计的占位符字体大小？
【发布时间】：2017-01-14 15:10:09
【问题描述】：

我的 jsfiddle here 有引导和引导材料设计的链接。我想让输入占位符的字体更小，但它只是不预算，即使是 moz 或 webkit 的输入占位符。任何建议将不胜感激。

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;
}

【问题讨论】：

使用 !important。（例如 font-size: 200px !important）
!important 对我不起作用

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

添加!important 覆盖样式

::-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;
}

&lt;input type="text" placeholder="Example.."&gt;

【讨论】：