INPUT TYPE PRESETS MADE WITH MOD CSS
See below some examples on how to make a custom input text with MOD CSS.
These models can be personalized by you.
It is very simple to do it, so just learn each them.
To get the code snippet, click to right, on icon
Transparent input
Basic input with custom outline when it is focused. We have set custom properties about background, border, padding etc.. and set fluid behaviours to display correctly on all screens.
// Setting new classname
<div :var=".input{ p[.3rem] p.lf[1rem] bg*ot[none] co[lightgray] br[.2rem] bd[1px solid gray] && focus:ot[thick double #32a1ce200] }"></div>
// set element
<input class="input" type="text" placeholder="MOD CSS input">
Simple dark input
Basic input dark with custom outline (here we use box-shadow) when it is focused. We have set custom properties about background, border, padding etc.. and set fluid behaviours to display correctly on all screens.
// Setting new classname
<div :var=".input{ p[.3rem] p.lf[1rem] bg[#202020] co[lightgray] ot[none] br[.2rem] bd[1px solid #404040] && focus: bd.co[#505050] bx.sh[0 0px 1px 3px #e6e6e620] }"></div>
// set element
<input class="input" type="text" placeholder="MOD CSS input">
Input like material design
Input with single bottom line and light colored background. When it is focused, the background disappears and border-bottom width changes.
// Setting new classname
<div :var=".input{ p[.3rem] p.lf[1rem] h[28px] co[lightgray] bg[#90909020] ot*bd[none] bd.bt[1px solid gray] bx.sz[border-box]
&& focus*hover: bg[none] bd.bt[1.5px solid lightblue] }"></div>
// set element
<input class="input" type="text" placeholder="MOD CSS input">
Input with colored border
Basic input with custom outline and colored border when it is focused. Border-color change when you click on this.
// Setting new classname
<div :var=".input{ p[.3rem] p.lf[1rem] bg*ot[none] br[.2rem] co[#7d33ff] bd[1px solid #ff8929]
&& hover*focus: bd.co[#7d33ff] ot[thick double #11121466] }"></div>
// set element
<input class="input" type="text" placeholder="MOD CSS input">
Input like Bootstrap
We attempt to reproduce input effect field like bootstrap with MOD CSS. For custom theme, just change the border-color and box-shadow color.
// Setting new classname
<div :var=".input{ p[.3rem] p.lf[1rem] bg*ot[none] co[lightgray] br[.2rem] bd[1px solid #90909030]
&& focus: bd.co[#195bff40] bx.sh[0 0px 1px 3px #195bff20] }"></div>
// set element
<input class="input" type="text" placeholder="MOD CSS input">
Input with custom font
We just reproduced previous example and add on attribute :box, font-family CSS property with custom value.
// Setting new classname
<div :var=".input{ p[.3rem] p.lf[1rem] bg*ot[none] co[lightgray] fo.fa[monospace] br[.2rem] bd[1px solid #90909030]
&& hover*focus:bd.co[#195bff40] bx.sh[0 0px 1px 3px #195bff20] }"></div>
// set element
<input class="input" type="text" placeholder="MOD CSS input">
Input disabled style
Below, with set custom properties on disabled input. Firstly, you got to add disabled attribute to your input.
Secondly, call our disabled state and set this. Here we set opacity, outline, border and background color.
// Setting new classname
<div :var=".input-dis{ p[.3rem] p.lf[1rem] co[lightgray] && disabled: bg[#12ace910] ot[none] br[.2rem] bd[1px dashed #90909020] op[.7] }"></div>
// set element
<input class="input-dis" type="text" placeholder="MOD CSS input">
Input with icon
Another custom input like bootstrap with custom icon. You can replace icon by any special characters.
//set selector
<div :var=".input-dis{ p[.3rem] p.lf[1rem] bg[none] bd[1px solid transparent] co[lightgray] ot[none]
&& focus:bd.co[#195bff40] bx.sh[0 0px 1px 3px #195bff20}"></div>
// setting input style
<div :mod="row[100%]" :box="br[.2rem] bd[1px solid #90909030] m[auto] m.tp[1rem]">
<span class="bx bx-user bx-sm"
:mod="col[fit]" :box="p[.2rem .6rem] bg[#90909030] val[sub]">
</span>
<input :mod="col[auto]" type="text" class="input" placeholder="MOD CSS input">
</div>