How to set the color and font style of placeholder text

后端 未结 5 1193
没有蜡笔的小新
没有蜡笔的小新 2021-02-13 19:17

I want to set the color to the placeholder, change the font style to bold, and increase the size.

How can I achieve this? Should I give style to the placeholder, or is t

相关标签:
5条回答
  • 2021-02-13 19:49

    You can use the following code for cross-browser support:

    For Google Chrome:

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

    For Mozilla Firefox:

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

    For Internet Explorer:

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

    For Opera:

    .element:-o-input-placeholder {
        color: blue;
        font-weight: bold;
    } 
    
    0 讨论(0)
  • 2021-02-13 19:52

    You can use the placeholder pseudo element And font-weight to make it bolder

    <!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>

    0 讨论(0)
  • 2021-02-13 19:58

    you can find this and more css tricks here

    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>

    0 讨论(0)
  • 2021-02-13 20:00

    Here is the for customizing placeholder

    ::-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;
    }
    
    0 讨论(0)
  • 2021-02-13 20:03

    For me, just the font-weight: normal; worked like

    .class {
    font-weight: normal;  
    }  
    
    0 讨论(0)
提交回复
热议问题