<tutorialjinni.com/>

Change Color of Placeholder CSS

Posted Under: CSS3, Programming, Tutorials on Feb 3, 2017
CSS styles can be applied to placeholder attribute as well but it is not straight forward because the syntax varies from browser to browser. It is not standardizes yet. Below is the different CSS class for different browsers. 
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #1f2b26;
    font-family: monospace;
}
::-moz-placeholder {  /* Firefox */
    color: #1f2b26;
    font-family: monospace; 
}
:-ms-input-placeholder { /* IE & Edge */
    color: #1f2b26;
    font-family: monospace; 
}
Observe the : in :-ms-input-placeholder it has only one colon other has two colons. Currently google chrome only support :placeholder-shown pseudo class. 
:placeholder-shown{
    background-color: #f5ebdf;
}
This class can style the text filed or text area before user input anything. It can be used to remind user that filed is required. Placeholder styling can also be used with :focus pseudo class. 
:focus::-webkit-input-placeholder {
    opacity: 0.4;
}
:focus::-moz-placeholder {
    opacity: 0.4;
}
:focus:-ms-input-placeholder {
    opacity: 0.5;
}
A complete working exmaple is as below 
<!DOCTYPE html>
<html>
<head>
<title>Change Color of Text filed Placeholder</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    body {
      background: #445446;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 250px;
      font-family: cursive;
    }
    input {
      border: #000;
      padding: 10px;
      font-size: 2em;
      width: 100%;
      border-radius: 5px;
    }
    label {
      font-size: 2em;
      display: block;
      color: #fff;
      margin: 0 0 4px;
    }
    form{
	width : 50%
    }

    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: #1f2b26;
	font-family: monospace;
    }            
    ::-moz-placeholder {  /* Firefox */
	color: #1f2b26;
	font-family: monospace; 
    }
    :-ms-input-placeholder { /* IE & Edge */
	color: #1f2b26;
	font-family: monospace; 
    }

    :focus::-webkit-input-placeholder {/* Chrome/Opera/Safari */
	opacity: 0.4;
    }
    :focus::-moz-placeholder {/* Firefox */
	opacity: 0.4;
    }
    :focus:-ms-input-placeholder {/* IE & Edge */
	opacity: 0.5;
    }

    :placeholder-shown{/* only Chrome */
	background-color:#f5ebdf;
    }

</style>
</head>
    <body>
        <form action="">
          <div>
            <label for="country">Country Name:</label>
            <input id="country" name="country" type="text" placeholder="Islamic Republic of Pakistan">
          </div>
        </form>
    </body>
</html>
above code will be rendered like the below image Change Color of Placeholder CSS


imgae