Input Placeholder Selector in CSS
CSS is all about presentation. Discover how Input Placeholder Selector in CSS works to transform plain HTML into a premium user experience in the guide below.
The placeholder selector is a pseudo-element used to create placeholder text designs in CSS. This selector can modify the text colors and style.
The pseudo-elements are initially employed to style the first line with CSS properties. Placeholder pseudo-elements can be included based on the web browser's specifications. Typically, browsers render the placeholder text in a faint or light grey shade by default. CSS text properties can be utilized to customize the appearance of the inline placeholder text.
Syntax
The below syntax demonstrates a simple placeholder selector in CSS. It can be applied across different web browsers for styling elements. The class name, id name, and elements precede the placeholder element.
::placeholder {
/* CSS properties */
color: navy;
}
Or
input::placeholder {
/* CSS properties */
color: navy;
}
Supported Styles Properties
The following properties are allowed to style using the pseudo-element:
- font properties
- color
- background properties
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- text-indent
- opacity
Examples
The examples demonstrate the CSS style properties applied to pseudo-elements.
Example 1:
The given demonstration illustrates the fundamental input placeholder selector in CSS.
<!DOCTYPE html>
<html>
<head>
<title> Input Placeholder Selector in CSS </title>
<style>
::placeholder {
background-color: grey;
padding: 10px;
color: white;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h2> Input Placeholder Selector in CSS </h2>
<h4> we can use basic ::placeholder of the CSS </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "fname" name = "first_name" placeholder = "First name">
<br> <br>
<label for = "last_name"> Last Name: </label>
<input type = "text" id = "lname" name = "last_name" placeholder = "Last name">
<br> <br>
<label for = "email"> Email Id: </label>
<input type = "email" id = "email" name = "email" placeholder = "Email">
</form>
</body>
</html>
Output:
The output shows the placeholder's styles.
Example 2:
The upcoming instance illustrates the fundamental input placeholder selector in CSS. We have the option to append the element prior to the pseudo-element of the placeholder. It involves employing uncomplicated element titles and ID designations for the elements.
<!DOCTYPE html>
<html>
<head>
<title> Input Placeholder Selector in CSS </title>
<style>
#last_name::placeholder {
background-color: navy;
padding: 10px;
color: white;
}
input::placeholder {
background-color: beige;
padding: 10px;
color: navy;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h3> Input Placeholder Selector in CSS </h3>
<h4> we can use basic element::placeholder of the CSS </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "First Name">
<br> <br>
<label for = "last_name"> Last Name: </label>
<input type = "text" id = "last_name" name = "last_name" placeholder = "Last Name">
<br> <br>
<label for = "email"> Email Id: </label>
<input type = "email" id = "email" name = "email" placeholder = "Email">
</form>
</body>
</html>
Output:
The output shows the placeholder's styles.
Example 3:
The upcoming instance demonstrates the placeholder selector for applying styles in CSS. The pseudo-element of the placeholder can be employed with various web browsers.
<!DOCTYPE html>
<html>
<head>
<title> Input Placeholder Selector in CSS </title>
<style>
::-webkit-input-placeholder {
/* Chrome/Opera/Safari browsers */
background-color: yellow;
padding: 10px;
color: navy;
}
::-moz-placeholder {
/* after Firefox 19 */
background-color: yellow;
padding: 10px;
color: navy;
}
:-ms-input-placeholder {
/* after IE 10 */
background-color: yellow;
color: navy;
}
:-moz-placeholder {
/* before Firefox 19 */
background-color: yellow;
padding: 10px;
color: navy;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h3> Input Placeholder Selector in CSS </h3>
<h4> We can use a basic placeholder for different browsers using the CSS </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "First Name">
<br> <br>
<label for = "last_name"> Last Name: </label>
<input type = "text" id = "last_name" name = "last_name" placeholder = "Last Name">
<br> <br>
<label for = "email"> Email Id: </label>
<input type = "email" id = "email" name = "email" placeholder = "Email">
</form>
</body>
</html>
Output:
The output shows the placeholder's styles.
Example 4:
The provided example demonstrates the utilization of the input placeholder selector in CSS when defining input types. It is possible to incorporate the input tag element preceding the pseudo-element of the placeholder. This involves employing the mandatory HTML element alongside input types such as text and email within the tag.
<!DOCTYPE html>
<html>
<head>
<title> Input Placeholder Selector in CSS </title>
<style>
input[type="email"]::placeholder {
background-color: navy;
padding: 10px;
color: white;
}
input[type="text"]::placeholder {
background-color: beige;
padding: 10px;
color: navy;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h3> Input Placeholder Selector in CSS </h3>
<h4> we can use basic input[type="type_name"]::placeholder of the CSS </h4>
<form>
<label for = "first_name"> First Name: </label>
<input type = "text" id = "first_name" name = "first_name" placeholder = "Write First Name">
<br> <br>
<label for = "email"> Email Id: </label>
<input type = "email" id = "email" name = "email" placeholder = "Write Email">
<br> <br>
<label for = "contact"> Contact Number: </label>
<input type = "number" id = "contact" name = "contact" placeholder = "Write Contact Number">
</form>
</body>
</html>
Output:
The output shows the placeholder's styles.
Supported Browsers
The placeholder selector supports the following browsers:
- Google Chrome
- Microsoft Edge
- Firefox
- Safari
- Opera
Conclusion
The placeholder selector entices users to input or complete the data. It assists in accurately populating the required information.
