Home/Explore/

Custom radio button

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<label style="
    /* Center the content horizontally */
    align-items: center;
    display: inline-flex;

    /* Cursor */
    cursor: pointer;
">
    <!-- The real radio -->
    <input
        type="radio"
        style="
            /* Hide it */
            display: none;
        "
    />

    <!-- The fake circle -->
    <div style="
        /* Rounded border */
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 9999px;

        /* Spacing */
        margin-right: 8px;
        padding: 4px;
    ">
        <!-- The inner circle -->
        <div style="
            /* Rounded border */
            border-radius: 9999px;
            height: 16px;
            width: 16px;

            /* For selected radio */
            background-color: #00449E;

            /* For not selected radio */
            background-color: transparent;
        " />
    </div>

    <!-- The text -->
    ...
</div>

Related patterns

Custom checkbox button

Radio button group

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!