Geek Answers Handbook

How to set the font color and style of placeholder text

I want to set the color in 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 there any other way I can achieve this? I want to set the color and change the font style to work in all browsers to select the size in the result below.

<!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>
+6
source share
4 answers

You can use the following code to support cross browser :

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; }
+9
source

you can find here 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>
+5
source

You can use the placeholder pseudo-element And make font-weight 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>
+3
source

Here is the placeholder to configure

 ::-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; }
+2
source

More articles:


All Articles