EN
CSS - style only readonly input HTML elements
0 points
In this article, we would like to show you how to style only readonly input HTML elements using CSS.
Quick solution:
xxxxxxxxxx1
input:read-only {2
background: yellow;3
}
In this example, we present how to use :read-only pseudo class to style only readonly HTML input elements.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
input:read-only {7
background: #ffe973;8
}9
10
</style>11
</head>12
<body>13
<input type="text" placeholder="e-mail" disabled />14
<input type="text" placeholder="username" readonly />15
<input type="password" placeholder="password" />16
</body>17
</html>This solution may be useful when we want to style only input elements that have readonly and disabled HTML attributes.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
input[disabled], input[readonly] {7
background: #ffe973;8
}9
10
</style>11
</head>12
<body>13
<input type="text" placeholder="e-mail" disabled />14
<input type="text" placeholder="username" readonly />15
<input type="password" placeholder="password" />16
</body>17
</html>
