Untitled
unknown
plain_text
2 months ago
1.4 kB
2
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Features Demonstration</title>
<style>
/* 14) Apply pseudo-class focus for the checkbox */
input[type="checkbox"]:focus {
border: 2px solid green;
outline: none;
}
/* 15) Apply pseudo-class focus for the textbox */
input[type="text"]:focus {
border: 2px solid blue;
outline: none;
}
/* 16) Roman numerals for ordered list */
ol.roman-numerals {
list-style-type: upper-roman;
}
/* 17) Roman letters (a.b.c) for ordered list */
ol.roman-letters {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h1>CSS Features Demonstration</h1>
<!-- 14) Checkbox focus -->
<input type="checkbox" id="checkbox1" name="checkbox1"> Check this box.
<br><br>
<!-- 15) Textbox focus -->
<input type="text" placeholder="Focus on me">
<br><br>
<!-- 16) Roman numerals in ordered list -->
<ol class="roman-numerals">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<!-- 17) Roman letters (a.b.c) in ordered list -->
<ol class="roman-letters">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
</body>
</html>Editor is loading...
Leave a Comment