1::-webkit-input-placeholder { /* Chrome/Opera/Safari */
2 color: pink;
3}
4::-moz-placeholder { /* Firefox 19+ */
5 color: pink;
6}
7:-ms-input-placeholder { /* IE 10+ */
8 color: pink;
9}
10:-moz-placeholder { /* Firefox 18- */
11 color: pink;
12}
1Placeholder attribute does not exist for the <select> tag.
2But there are some ways to make a placeholder for the select box.
3The easiest way of making a placeholder for the <select> element is using the disabled and selected attributes with the HTML5 hidden global attribute.
4
5<select name="monthname" required>
6 <option value="" selected disabled hidden>Select Month</option>
7 <option value="Jan">January</option>
8 <option value="Feb">February</option>
9 <option value="Mar">March</option>
10 <option value="Apr">April</option>
11 <option value="May">May</option>
12 <option value="Jun">June</option>
13 <option value="Jul">July</option>
14 <option value="Aug">August</option>
15 <option value="Sep">September</option>
16 <option value="Oct">October</option>
17 <option value="Nov">November</option>
18 <option value="Dec">December</option>
19</select>
1input::-webkit-input-placeholder {/* Chrome/Opera/Safari/Edge */
2 /*styles here*/
3}
4
5input::-ms-input-placeholder { /* Microsoft Edge */
6 /*styles here*/
7}
8
9input:-ms-input-placeholder {/* IE 10+ */
10 /*styles here*/
11}
12
13input::-moz-placeholder {/* Firefox 19+ */
14 opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
15 /*styles here*/
16}
17
18input:-moz-placeholder {/* Firefox 18- */
19 opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
20 /*styles here*/
21}
22
23input::placeholder {
24 /*styles here*/
25}
1::-webkit-input-placeholder {color: pink;} /* Chrome/Opera/Safari */
2::-moz-placeholder { color: pink;} /* Firefox 19+ */
3:-ms-input-placeholder { color: pink;} /* IE 10+ */
4:-moz-placeholder {color: pink;} /* Firefox 18- */
1input {
2 border: 1px solid black;
3 padding: 3px;
4 height: 300px;
5}
6
7input:placeholder-shown {
8 border-color: teal;
9 color: purple;
10 font-style: italic;
11}