HTML CSS Exercise: Style placeholder text

Last update on March 04 2024 06:50:33 (UTC/GMT +8 hours)

Solution:

HTML Code :

<!DOCTYPE html<<!-- Document type declaration --<
<html<<!-- Opening HTML tag --<
<head<<!-- Head section containing metadata --<
<meta charset="utf-8"<<!-- Character encoding declaration --<
<title<HTML CSS Exercises - Style Placeholder text</title<<!-- Title of the HTML document --<
<style type="text/css"< /* Opening style tag for CSS with type attribute */
input[type="text"]::-webkit-input-placeholder { /* Styling placeholder text for text input fields in WebKit browsers */
color: orange; /* Set the color of the placeholder text */
}
</style<<!-- Closing style tag --<
</head<<!-- Closing head tag --<
<body<<!-- Body section of the HTML document --<
<!--insert this within html section. within body of codepen --<
<form action=""<<!-- Form element --<
<div<<!-- Div container --<
<label for="email"<Email:</label<<!-- Label for email input --<
<input id="email" name="email" type="text" placeholder="[email protected]"<<!-- Text input field with placeholder text --<
</div<<!-- Closing div container --<
</form<<!-- Closing form element --<
<!--insert this within css section. within body of codepen --<
</body<<!-- Closing body tag --<
</html<<!-- Closing HTML tag --<

Explanation:

The HTML document contains a form with an input field for an email address.
CSS is used to style the placeholder text specifically for text input fields in WebKit browsers.
The CSS selector targets input fields of type "text" and modifies the appearance of the placeholder text.
The placeholder text is styled with an orange color to make it stand out.
Comments in the HTML code indicate the purpose of each element, and the placeholder text provides guidance to users on the expected input format.
Comments are added to indicate where to insert HTML and CSS code within the CodePen editor.

Live Demo :

See the Pen style-placeholder-text-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes