INPUT RADIO PRESETS MADE WITH MOD CSS

We are going to show you how to create custom beautiful radio button with MOD CSS very easily.
These models can be personalized by you in according your needs. It is very simple to do it, so just learn each them.

To get the code snippet, click to right, on icon

Rounded square input radio

Basic input radio with custom border and background. We removed default radio style to recreate new design with MOD CSS. We are going to use checked and focus states to define style after action.

Radio custom 1

Radio custom 2

Radio custom 3

HTML

                    
    <!-- One of the three input square radio -->
    <input type="radio" :box="w*h[1.2rem] val[sub] ape[none] bg[#f4f4f420] bd[.5px solid #606060] br[20%]
                 && checked:bg[#12ace9] bd[2px solid #e6e6e6] bx.sh[0 0px 1px 3px #195bff20]">

Input radio like Bootstrap

We got to recreate Bootstrap radio button style.

Radio type 1

Radio type 2

Radio type 3

HTML

                    
    <!-- Or set selector -->
    <div :var="[name=radio]{ w*h[1rem] val[txt-top] ape[none] bg[none] bd[.5px solid #606060] br[50%] 
            && checked*focus: bd[4.5px solid #12ace9] bx.sh[0 0px 1px 4px #195bff40] }"></div>

    <input type="radio" name="radio">

Input radio MOD-CSS style

Radio MOD 1

Radio MOD 2

Radio MOD 3

HTML

                    
    <input type="radio"
            :box="w*h[1rem] val[txt-top] ape[none] bg[#f4f4f420] bd[.5px solid gray] br[2px] 
                && checked: bg[#7d33ff70] bd[1px solid #7d33ff] && focus: ot[thick double #7d33ff26]">

Input radio with colored border

Just for example, we are going to mix colors and use differents color on border and background.

Radio MOD 1

Radio MOD 2

Radio MOD 3

HTML

                    
    <input type="radio" 
            :box="w*h[1rem] val[txt-top] ape[none] bg[#ff892920] bd[1px solid #ff8929] br[20%] 
            && checked: bg[#7d33ff] && focus: bx.sh[0 0px 1px 4px #7d33ff30]">

Input radio disabled style

On this example, we show you how to design disabled state.

Radio MOD

HTML

                    
    <input type="radio" disabled
        :box="w*h[1rem] val[txt-top] ape[none] br[20%] 
            && disabled: bd[1px solid gray] bg[rgba(200,200,200, .3)] opc[.3] cu[not-allowed]">

Input radio with Emoji

Here, you see how to replace default style radio button by icon for survey.

Unsatisfied

Moderate

Satisfied

HTML

                    
    // set selector
    <div :var="[name=radio]{ w*h[1rem] co[gray] ape[none] cu[pointer] }"></div>

    // customize each radio button
    <div :box="p[4px]">
        <span class="label">Unsatisfied</span>
        <input type="radio" name="radio" :box="focus*checked: co[orangered]"
                class='bx bx-sm bx-sad'>
    </div>
        
    <div :box="p[4px]">
        <span class="label">Moderate</span>
        <input type="radio" name="radio" :box="focus*checked: co[yellow]"
                class='bx bx-sm bx-confused'>
    </div>
        
    <div :box="p[4px]">
        <span class="label">Satisfied</span>
        <input type="radio" name="radio" :box="focus*checked: co[#195bff]"
                class='bx bx-sm bx-smile'>
    </div>