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.
<!-- 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.
<!-- 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
<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.
<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.
<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.
// 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>