Untitled

avatar
unknown
plain_text
a year ago
1.4 kB
5
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