如何设置占位符文本的颜色和字体样式答案

【问题标题】：How to set the color and font style of placeholder text如何设置占位符文本的颜色和字体样式
【发布时间】：2016-11-24 01:15:17
【问题描述】：

我想给占位符设置颜色，把字体样式改成粗体，加大字号。

我怎样才能做到这一点？我应该为占位符赋予样式，还是有其他方法可以实现这一点？我想在下面的结果中设置颜色并更改字体样式以在所有浏览器中选择大小。

<!doctype html>



<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }


.k-dropdown-wrap{
  border-width: 5px !important;
  border-color: #D8D3D3 !important;
}

}



</style>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>



    <div id="example" role="application">
        <div id="tshirt-view" class="demo-section k-content">

        
        <select id="size" placeholder="Select City..." style="width: 300px;" >
          <option />
          <option />Newyork
          <option />Hyderabad
          <option />Bangalore
          <option />Kolkata
          <option />Delhi
        </select>


    </div>

        <script>
            $(document).ready(function() {
                // create ComboBox from input HTML element

                // create ComboBox from select HTML element
                $("#size").kendoComboBox();


                var select = $("#size").data("kendoComboBox");



            });


        </script>
    </div></!doctype>

【问题讨论】：

Change an input's HTML5 placeholder color with CSS的可能重复

标签： html css placeholder

【解决方案1】：

您可以使用以下代码跨浏览器支持：

对于 谷歌浏览器：

.element::-webkit-input-placeholder {
    color: blue;
    font-weight: bold;
}

对于 Mozilla Firefox：

.element::-moz-placeholder {
    color: blue;
    font-weight: bold;
}

对于 Internet Explorer：

.element:-ms-input-placeholder {
    color: blue;
    font-weight: bold;
}

对于Opera：

.element:-o-input-placeholder {
    color: blue;
    font-weight: bold;
}

【讨论】：

如何加粗体？ @Angel Politis
@overflowstack9 放入 font-weight: bold。我会编辑给你看。
很高兴我能帮助你@overflowstack9
我可以把所有的 css 代码放在我的代码中吗？我的意思是添加样式，我的意思是，如果我把所有的代码都放在所有的浏览器上，它才适用..？
如果你想要跨浏览器支持，你必须把它们都放在@overflowstack9。

【解决方案2】：

你可以在这里找到这个以及更多的 CSS 技巧

https://css-tricks.com/snippets/css/style-placeholder-text/

::-webkit-input-placeholder {
   color: red;
   font-weight: 800;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
   font-weight: 800;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
   font-weight: 800;
}

:-ms-input-placeholder {  
   color: red;  
   font-weight: 800;
}

<!doctype html>



<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }


.k-dropdown-wrap{
  border-width: 5px !important;
  border-color: #D8D3D3 !important;
}
::-webkit-input-placeholder {
   color: red;
}
}



</style>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>



    <div id="example" role="application">
        <div id="tshirt-view" class="demo-section k-content">

        <h4 style="margin-bottom: .5em;">Select City</h4>
        <select id="size" placeholder="Select City..." style="width: 300px;" >
          <option />
          <option />Newyork
          <option />Hyderabad
          <option />Bangalore
          <option />Kolkata
          <option />Delhi
        </select>


    </div>

        <script>
            $(document).ready(function() {
                // create ComboBox from input HTML element

                // create ComboBox from select HTML element
                $("#size").kendoComboBox();


                var select = $("#size").data("kendoComboBox");



            });


        </script>
    </div></!doctype>

【讨论】：

【解决方案3】：

您可以使用placeholder 伪元素和font-weight 让它更大胆

<!doctype html>



<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }


.k-dropdown-wrap{
  border-width: 5px !important;
  border-color: #D8D3D3 !important;
}
    ::-webkit-input-placeholder {
        font-weight: 800; 
        font-size: 16px;
    }
    :-moz-placeholder {
        font-weight: 800; 
        font-size: 16px;
    }
    ::-moz-placeholder {
        font-weight: 800; 
        font-size: 16px;
    }
    :-ms-input-placeholder {
        font-weight: 800; 
        font-size: 16px;
    }
}



</style>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />

<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>



    <div id="example" role="application">
        <div id="tshirt-view" class="demo-section k-content">

        <h4 style="margin-bottom: .5em;">Select City</h4>
        <select id="size" placeholder="Select City..." style="width: 300px;" >
          <option />
          <option />Newyork
          <option />Hyderabad
          <option />Bangalore
          <option />Kolkata
          <option />Delhi
        </select>


    </div>

        <script>
            $(document).ready(function() {
                // create ComboBox from input HTML element

                // create ComboBox from select HTML element
                $("#size").kendoComboBox();


                var select = $("#size").data("kendoComboBox");



            });


        </script>
    </div></!doctype>

【讨论】：

【解决方案4】：

这里是自定义占位符

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
    font-size:12px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   font-size:12px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   font-size:12px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
   font-size:12px;
}

【讨论】：

【解决方案5】：

对我来说，font-weight: normal; 的工作原理就像

.class {
font-weight: normal;  
}

【讨论】：