css placeholder attribute code example
Example 1: css style placeholder
input::-webkit-input-placeholder {/* Chrome/Opera/Safari/Edge */
/*styles here*/
}
input::-ms-input-placeholder { /* Microsoft Edge */
/*styles here*/
}
input:-ms-input-placeholder {/* IE 10+ */
/*styles here*/
}
input::-moz-placeholder {/* Firefox 19+ */
opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
/*styles here*/
}
input:-moz-placeholder {/* Firefox 18- */
opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
/*styles here*/
}
input::placeholder {
/*styles here*/
}
Example 2: css style placeholder
<!DOCTYPE html>
<html lang="en">
<head>
<title>Placeholder - Style</title>
<style>
::placeholder {
color: green;
}
.force-opaque::placeholder {
opacity: 1;
}
</style>
</head>
<body>
<input placeholder="Default opacity..." />
<input placeholder="Full opacity..." class="force-opaque" />
</body>
</html>
Example 3: placeholder text css
input {
border: 1px solid black;
padding: 3px;
height: 20px;
}
input:placeholder-shown {
border-color: teal;
color: purple;
font-style: italic;
}
Example 4: css style placeholder
::placeholder {
/*styles here*/
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
/*styles here*/
}