我可以更改 JQuery Datepicker 占位符文本的颜色吗？答案

【问题标题】：Can I change the color of the JQuery Datepicker Placeholder text?我可以更改 JQuery Datepicker 占位符文本的颜色吗？
【发布时间】：2016-01-09 08:24:14
【问题描述】：

标题说明了一切。我可以更改 JQuery UI 的 Datepicker 占位符的颜色吗？

日期选择器供参考：http://jqueryui.com/datepicker/

JSFiddle：https://jsfiddle.net/guez0tb9/

<input type="text" id="datepicker" placeholder="Enter Date">

【问题讨论】：

标签： jquery css jquery-ui datepicker

【解决方案1】：

是的，如本文所述：https://css-tricks.com/almanac/selectors/p/placeholder-shown/

::-webkit-input-placeholder { /* Safari, Chrome and Opera */
  color: orange;
}

:-moz-placeholder { /* Firefox 18- */
  color: orange;
}

::-moz-placeholder { /* Firefox 19+ */
  color: orange;
}

:-ms-input-placeholder { /* IE 10+ */
  color: orange
}

::-ms-input-placeholder { /* Edge */
  color: orange
}

:placeholder-shown { /* Standard one last! */
  color: orange;
}

关于浏览器的兼容性：

Chrome  Safari  Firefox  Opera  IE    Edge   Android    iOS
4+*       5+*     4+*     33+*  10+*  Yes*     Yes*     Yes*

*此信息取自同一篇文章！

看看： https://jsfiddle.net/guez0tb9/1/

【讨论】：

太棒了，这正是我想要的。我一定是使用了错误的关键字来查找此信息。

【解决方案2】：

简单添加以下css：

::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

Working Fiddle

检查more information

【讨论】：

【解决方案3】：

这与任何输入表单字段占位符相同。您可以在下面使用：

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    red;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    red;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    red;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    red;
}

【讨论】：

【解决方案4】：

有多种方法可以改变占位符文本的颜色。在你的文件中添加一些 css。

              <style>
               ::-moz-placeholder { /* Mozilla Firefox 19+ */
                 color:    #909;
                  opacity:  1;
                  }
               <\style>

【讨论】：