Псевдокласс :indeterminate




Исходный код этого примера:
<style>
    input {
        box-shadow: none !important;
    }
    input[type="checkbox"] + span {
        position: relative;
        top: -2px;
        left: 3px;
    }
    :indeterminate + span {
        opacity: 0.5;
    }
</style>
<form>
    <label><input type="checkbox" name="a1"><span>Выключенный флажок</span></label><br>
    <label><input type="checkbox" checked name="a2"><span>Включенный флажок</span></label><br>
    <label><input type="checkbox" name="a3"><span>Неопределенный флажок</span></label><br>
</form>
<script>
    document.getElementsByName("a3")[0].indeterminate = true;
</script>

.