TEXTAREA PRESETS MADE WITH MOD CSS

You will see how to stylised textarea with MOD CSS and change default appearance. We are also going to set fluid behaviours to display correctly on all screens
These models can be personalized by you in according your needs.

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

Custom fixed Textarea

We use flex disposition to display correctly on all screens and set custom properties about background, border, padding etc.. to style it. We've disabled resizing option of textarea with rz[none]

HTML 
                    
    <textarea rows="8"
        :box="w[100%] p[1rem 12px] co[gray] ln.h[1.4] rz*ot[none] bg[lightgray] bd[1px solid lightgray] br[2px]
                && focus: bd.co[#195bff] || lg? w[90%]">
    </textarea>

Textarea like Bootstrap

Here, we are trying to reproduce style like Bootstrap with box-shadow effect on hover/focus. We added responsive behaviours on width, which switch on lg screen.

HTML 
                    
    <textarea rows="10"
        :box="p[12px] w[100%] bd[1px solid lightgray] co[gray] br[6px] ot[none] 
                && focus: bx.sh[0 0px 1px 4px #195bff30] || lg? w[90%] ">
    </textarea>

Textarea MOD-CSS style

Custom transparent textarea design. When it's focused, background display light.
We use outline to set border highlight.

HTML 
                    
    <textarea rows="10"
        :box="p[12px] w[100%] bg[#f2f2f220] bd[1px solid lightgray] br[6px] co[gray] ot[none] && focus: bg[white] ot[thick solid #195bff30] || lg? w[90%] ">
    </textarea>

Colored Textarea

Basic textarea with custom background-color, outline and colored border when it is focused.
Outline change when you click on this.

HTML 
                    
    // we set classname to display textarea
    <div :var=".area{ p[12px] w[30%] co[gray] br[6px] ot[none] }"></div>

    //Styling textarea
    <textarea rows="10" class="area" 
        :box="bg[#ff892980] bd[1px solid lightgray] && focus: bg[lightgray] ot[thick solid #ff892930]">
    </textarea>
    
    <textarea rows="10" class="area"
        :box="bg[#ffc107d0] bd[1px solid lightblue] && focus: bg[white] ot[thick solid #195bff30]">
    </textarea>
    
    <textarea rows="10" class="area"
        :box="bg[#19875440] bd[1px solid gray] && focus: bg[white] ot[thick solid #195bff30]">
    </textarea>

Disabled Textarea

We set disabled behaviour. Firstly, you got to add disabled attribute to your input.
Secondly, you can style it like you want. Here we set opacity, background color...

HTML 
                    
    <textarea  rows="10" disabled
        :box="p[1rem 12px] rz[none] bg[lightgray] bd[1px solid gray] br[6px] op[30%] co[gray] cu[not-allowed]">
        {% lorem 1p %}
    </textarea>

Textarea MOD-CSS style 2

Another custom textarea style with label animation effect. When focused, background-color opacity of textarea change and hide label.
We used default rows/cols textarea attribute to set width and height.

Don't forget, using of textarea's attribute rows /cols cannot permit responsive behaviour or fluid design and may produce overflowing (like below on mobile device).

HTML 
                    
    <label :box="d[block] m[0 0 -2rem .8rem] p[4px]">
        Description</label>
    <textarea rows="9" cols="65"
        :box="p[2.2rem 1rem 1rem 1rem] bg[#f2f2f220] bd[1px solid lightgray] br[6px] ot[none] co[gray] ln.h[1.5]
        && focus: bg[white] bx.sh[0 0px 1px 4px #7d33ff30]">
    </textarea>