Focus Ring

The focus ring can be either modified of removed. To modify the color of the ring, change the value of the --focus. To remove the focus ring, use .focus-ring-none.

    <button>
        Button with the default focus
    </button>

    <button style="--focus: #ff00ff;">
        Button with a different focus
    </button>

    <button class="focus-ring-none">
        Button with no focus
    </button>

The .focus-ring-none cal also be applied globally or on a specific element in order to prevent any child element from having a focus ring. However, using this class globally is not recommended due to potential unwanted conflicts with property box-shadow.

    <div class="focus-ring-none">
        <button>
            Button with the default focus
        </button>

        <button class="focus-ring-none">
            Button with no focus
        </button>
    </div>