<!DOCTYPE HTML>
<html>
<head>
<style>
    input {
        background-color: blue;
        width: 15px;
        height: 15px;
        -webkit-appearance: none;
    }
    :checked {
        border: 2px solid red;
    }
    :indeterminate {
        background-color: green;
    }
    :disabled {
        border-left: 3px solid orange;
    }
</style>
</head>
<body>
    <div>
        <input type="radio">
        <input type="radio">
        <input type="radio" name="group1">
        <input type="radio" name="group1">
        <input type="radio" name="group2">
        <span><input type="radio" name="group2"></span>
        <input type="radio" name="group3">
        <input type="radio" name="group3" checked>
        <input type="radio" name="group4">
        <span><input type="radio" name="group4" checked></span>
        <input type="radio" disabled>
        <input type="radio" name="group5" disabled>
        <input type="radio" name="group5" disabled>
        <input type="radio" name="group6" disabled>
        <span><input type="radio" name="group6" disabled></span>
        <input type="radio" name="group7" disabled>
        <input type="radio" name="group7" checked disabled>
        <input type="radio" name="group8" disabled>
        <span><input type="radio" name="group8" checked disabled></span>
        <input type="radio" readonly>
        <input type="radio" name="group9" readonly>
        <input type="radio" name="group9" readonly>
        <input type="radio" name="group10" readonly>
        <span><input type="radio" name="group10" readonly></span>
        <input type="radio" name="group11" readonly>
        <input type="radio" name="group11" checked readonly>
        <input type="radio" name="group12" readonly>
        <span><input type="radio" name="group12" checked readonly></span>
    </div>
    <form>
        <input type="radio">
        <input type="radio">
        <input type="radio" name="group1">
        <input type="radio" name="group1">
        <input type="radio" name="group2">
        <span><input type="radio" name="group2"></span>
        <input type="radio" name="group3">
        <input type="radio" name="group3" checked>
        <input type="radio" name="group4">
        <span><input type="radio" name="group4" checked></span>
        <input type="radio" disabled>
        <input type="radio" name="group5" disabled>
        <input type="radio" name="group5" disabled>
        <input type="radio" name="group6" disabled>
        <span><input type="radio" name="group6" disabled></span>
        <input type="radio" name="group7" disabled>
        <input type="radio" name="group7" checked disabled>
        <input type="radio" name="group8" disabled>
        <span><input type="radio" name="group8" checked disabled></span>
        <input type="radio" readonly>
        <input type="radio" name="group9" readonly>
        <input type="radio" name="group9" readonly>
        <input type="radio" name="group10" readonly>
        <span><input type="radio" name="group10" readonly></span>
        <input type="radio" name="group11" readonly>
        <input type="radio" name="group11" checked readonly>
        <input type="radio" name="group12" readonly>
        <span><input type="radio" name="group12" checked readonly></span>
    </form>
    <form disabled>
        <input type="radio">
        <input type="radio">
        <input type="radio" name="group1">
        <input type="radio" name="group1">
        <input type="radio" name="group2">
        <span><input type="radio" name="group2"></span>
        <input type="radio" name="group3">
        <input type="radio" name="group3" checked>
        <input type="radio" name="group4">
        <span><input type="radio" name="group4" checked></span>
        <input type="radio" disabled>
        <input type="radio" name="group5" disabled>
        <input type="radio" name="group5" disabled>
        <input type="radio" name="group6" disabled>
        <span><input type="radio" name="group6" disabled></span>
        <input type="radio" name="group7" disabled>
        <input type="radio" name="group7" checked disabled>
        <input type="radio" name="group8" disabled>
        <span><input type="radio" name="group8" checked disabled></span>
        <input type="radio" readonly>
        <input type="radio" name="group9" readonly>
        <input type="radio" name="group9" readonly>
        <input type="radio" name="group10" readonly>
        <span><input type="radio" name="group10" readonly></span>
        <input type="radio" name="group11" readonly>
        <input type="radio" name="group11" checked readonly>
        <input type="radio" name="group12" readonly>
        <span><input type="radio" name="group12" checked readonly></span>
    </form>
    <fieldset disabled>
        <input type="radio">
        <input type="radio">
        <input type="radio" name="group1">
        <input type="radio" name="group1">
        <input type="radio" name="group2">
        <span><input type="radio" name="group2"></span>
        <input type="radio" name="group3">
        <input type="radio" name="group3" checked>
        <input type="radio" name="group4">
        <span><input type="radio" name="group4" checked></span>
        <input type="radio" disabled>
        <input type="radio" name="group5" disabled>
        <input type="radio" name="group5" disabled>
        <input type="radio" name="group6" disabled>
        <span><input type="radio" name="group6" disabled></span>
        <input type="radio" name="group7" disabled>
        <input type="radio" name="group7" checked disabled>
        <input type="radio" name="group8" disabled>
        <span><input type="radio" name="group8" checked disabled></span>
        <input type="radio" readonly>
        <input type="radio" name="group9" readonly>
        <input type="radio" name="group9" readonly>
        <input type="radio" name="group10" readonly>
        <span><input type="radio" name="group10" readonly></span>
        <input type="radio" name="group11" readonly>
        <input type="radio" name="group11" checked readonly>
        <input type="radio" name="group12" readonly>
        <span><input type="radio" name="group12" checked readonly></span>
    </fieldset>
    <form>
        <fieldset disabled>
            <input type="radio">
            <input type="radio">
            <input type="radio" name="group1">
            <input type="radio" name="group1">
            <input type="radio" name="group2">
            <span><input type="radio" name="group2"></span>
            <input type="radio" name="group3">
            <input type="radio" name="group3" checked>
            <input type="radio" name="group4">
            <span><input type="radio" name="group4" checked></span>
            <input type="radio" disabled>
            <input type="radio" name="group5" disabled>
            <input type="radio" name="group5" disabled>
            <input type="radio" name="group6" disabled>
            <span><input type="radio" name="group6" disabled></span>
            <input type="radio" name="group7" disabled>
            <input type="radio" name="group7" checked disabled>
            <input type="radio" name="group8" disabled>
            <span><input type="radio" name="group8" checked disabled></span>
            <input type="radio" readonly>
            <input type="radio" name="group9" readonly>
            <input type="radio" name="group9" readonly>
            <input type="radio" name="group10" readonly>
            <span><input type="radio" name="group10" readonly></span>
            <input type="radio" name="group11" readonly>
            <input type="radio" name="group11" checked readonly>
            <input type="radio" name="group12" readonly>
            <span><input type="radio" name="group12" checked readonly></span>
        </fieldset>
        <fieldset>
            <input type="radio">
            <input type="radio">
            <input type="radio" name="group1">
            <input type="radio" name="group1">
            <input type="radio" name="group2">
            <span><input type="radio" name="group2"></span>
            <input type="radio" name="group3">
            <input type="radio" name="group3" checked>
            <input type="radio" name="group4">
            <span><input type="radio" name="group4" checked></span>
            <input type="radio" disabled>
            <input type="radio" name="group5" disabled>
            <input type="radio" name="group5" disabled>
            <input type="radio" name="group6" disabled>
            <span><input type="radio" name="group6" disabled></span>
            <input type="radio" name="group7" disabled>
            <input type="radio" name="group7" checked disabled>
            <input type="radio" name="group8" disabled>
            <span><input type="radio" name="group8" checked disabled></span>
            <input type="radio" readonly>
            <input type="radio" name="group9" readonly>
            <input type="radio" name="group9" readonly>
            <input type="radio" name="group10" readonly>
            <span><input type="radio" name="group10" readonly></span>
            <input type="radio" name="group11" readonly>
            <input type="radio" name="group11" checked readonly>
            <input type="radio" name="group12" readonly>
            <span><input type="radio" name="group12" checked readonly></span>
        </fieldset>
    </form>
</body>
</html>
