EN
CSS - style only required input HTML elements
0
points
In this article, we would like to show you how to style only required input HTML elements using CSS.
Quick solution:
input:required {
background: yellow;
}
Practical example
In this example, we present how to use :required pseudo class to style only required HTML input elements.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
input:required {
background: #ffe973;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="username" required />
<input type="password" placeholder="password" required />
<input type="text" placeholder="e-mail" />
</body>
</html>
Alternative solution
This solution may be useful when we want to style only input elements that have required HTML attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
input[required] {
background: #ffe973;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="text" placeholder="username" required />
<input type="password" placeholder="password" required />
<input type="text" placeholder="e-mail" />
</body>
</html>