overflowstack9 overflowstack9 - 4 months ago 12
HTML Question

How to set the color and font style of placeholder text

I want set the color to the place holder and also change the font style to bold and i also want to increase the size.

How can i achieve this should i give style to place holder or any other way can i achieve this. I mean 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; }

border-width: 5px !important;
border-color: #D8D3D3 !important;



<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


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

// create ComboBox from select HTML element

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




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;