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}
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <title>Placeholder - Style</title>
5 <style>
6 ::placeholder {
7 color: green;
8 }
9
10 .force-opaque::placeholder {
11 opacity: 1;
12 }
13 </style>
14 </head>
15 <body>
16 <input placeholder="Default opacity..." />
17 <input placeholder="Full opacity..." class="force-opaque" />
18 </body>
19</html>
1::placeholder {
2 /*styles here*/
3}
4
5:-ms-input-placeholder { /* Internet Explorer 10-11 */
6 /*styles here*/
7}