Menu
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 there any other way can I achieve this? I want to set the color and change font style to work in all browsers for select size in the below result.
<!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>
375
In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector.
The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text. The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.
Note: In most browsers, the appearance of placeholder text is a translucent or light gray color by default.
Change Input Placeholder Text with CSS You can use the ::placeholder pseudo-element to change the styles of the placeholder text, which includes the ability to change the background. The code in this example uses a Sass function to generate code for support in older browsers as well.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
