CSS :placeholder-shown Pseudo Class

« Back to CSS :placeholder-shown Pseudo Class

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
label {
  display: block;
  margin-top: 1em;
}

input:placeholder-shown {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}
</style>
</head>
<body>
<form>
  <label for="name">Full Name:</label>
  <input name="name" type="text" />

  <label for="email">Email Address:</label>
  <input name="email" type="email" placeholder="name@example.com" />

  <label for="age">Your age:</label>
  <input name="age" type="number" value="18" placeholder="You must be 18+" />
</form>
</body>
</html>

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee