Start Here

Introduction

Download

Syntax

Core Concepts

Aspect Ratio

Border Radius

Border Size

Border Style

Cursor

Display

Flex

Flex Alignment

Flex Direction

Flex Grow

Flex Position

Flex Size

Flex Width

Font

Gap

Height

Margin

Padding

Spacing

Width

UI Effects

Animations

Single Box

Multi Box

3D Box

Other

Box Shadows

OutSet Shadow

InSet Shadow

Text Shadow

OutSet Shadow

InSet Shadow

UI Widgets

Accordion

Buttons

Calendar

Card

Checks & Radio

Data Tables

DropDown

DropDown Multi Select

Gallery

Pagination

Pop-Up

Progress Bar

Skeleton

Spinners

Suggestion

Tabs

Toasts

Slider

Text Boxes

Text Editor

Tool Tip

Icons

Theme Color Shade

Color Shade

Text Color

Background Color

Border Color

Gradient

Text Gradient

Single Color

Double Color

Triple Color

Background Gradient

Single Color

Double Color

Triple Color

Border Gradient

Single Color

Double Color

Triple Color

Other Pages

Landing Pages

Top Nav 1

Top Nav 2

Side Nav 1

Forget Password

Apps

Add Data

Nav First Level

Nav Second Level

Nav Third Level

N
A
V

Stylish & Customizable Text Box

Enhance User Input with Style

Our customizable text box is designed to improve user interaction and form aesthetics. Whether for login forms, search bars, or contact fields, this input box adapts seamlessly to any design, ensuring a smooth and intuitive user experience.

Key Features:

Fully Responsive: The text box adjusts dynamically to fit various screen sizes, providing a consistent look on all devices.
Easily Customizable: Modify colors, borders, placeholder text, and animations to match your brand's style effortlessly.
Enhanced User Experience: Designed with accessibility in mind, ensuring clear visibility and ease of use.
Simple Integration: Quick setup with clean, well-structured code to streamline development.
Cross-Browser Compatibility: Works smoothly across all major browsers, guaranteeing a reliable experience for all users.

Text Boxes

Source Code


<div class="DyFx FxJyCtCr">

    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">
        <input class="TtBx" type="text" placeholder="Enter Your Text" />
        <input class="TtBx CrBdBk CrWe" type="text" placeholder="Enter Your Text" />
        <input class="TtBx CrRd" type="text" placeholder="Enter Your Text" />
    </div>

</div>

Text Box States

Source Code


<div class="DyFx FxJyCtCr">

    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">
        <input class="TtBx" type="text" placeholder="Enabled Text Box" />
        <input class="TtBx CrBdGy80Lt" type="text" placeholder="Disabled Text Box" disabled />
    </div>

</div>

Rounded Text Box

Source Code


<div class="DyFx FxJyCtCr">

    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">
        <input class="TtBx BrRs50" type="text" placeholder="Enter Your Text" />
        <input class="TtBx BrRs10" type="text" placeholder="Enter Your Text" />
        <input class="TtBx BrRs0" type="text" placeholder="Enter Your Text" />
    </div>

</div>

LightShade TextBox

Source Code


<div class="DyFx FxJyCtCr">
    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">
        <input class="TtBx Br1 CrBe CrBrBe CrBdBe25" type="text" placeholder="Enter Your Text" />
        <input class="TtBx Br1 CrGy CrBrGy CrBdGy25" type="text" placeholder="Enter Your Text" />
        <input class="TtBx Br1 CrGn CrBrGn CrBdGn25" type="text" placeholder="Enter Your Text" />
        <input class="TtBx Br1 CrOe CrBrOe CrBdOe25" type="text" placeholder="Enter Your Text" />
        <input class="TtBx Br1 CrRd CrBrRd CrBdRd25" type="text" placeholder="Enter Your Text" />
        <input class="TtBx Br1 CrPe CrBrPe CrBdPe25" type="text" placeholder="Enter Your Text" />
    </div>
</div>

Text Box with Icon

Source Code


<div class="DyFx FxJyCtCr">
    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">

        <div class="DyFx FxAnIsCr Wh100p">
            <div class="DyFx FxJyCtCr FxAnIsCr Ht100p CrBdTe Wh10p">
                <i class="CT-UserMSolid CrWe FtWt600 FtSe30"></i>
            </div>
            <input class="TtBx Wh90p BrRs0" type="text" placeholder="Enter Your Name" />
        </div>

        <div class="DyFx FxAnIsCr Wh100p">
            <div class="DyFx FxJyCtCr FxAnIsCr Ht100p CrBdTe Wh10p">
                <i class="CT-KeySmallSolid CrWe FtWt600 FtSe30"></i>
            </div>                        
            <input class="TtBx Wh90p BrRs0" type="text" placeholder="Enter Your Password" />
        </div>

    </div>
</div>

Text Box with Width

Source Code


<div class="DyFx FxJyCtCr">

    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">
        <input class="TtBx Wh25p" type="text" placeholder="Width 25%" />
        <input class="TtBx Wh50p" type="text" placeholder="Width 50%" />
        <input class="TtBx Wh75p" type="text" placeholder="Width 75%" />
        <input class="TtBx Wh100p" type="text" placeholder="Width 100%" />
        <input class="TtBx" type="text" placeholder="Default" />
    </div>

</div>

Text Box with Label

Label

Source Code


<div class="DyFx FxJyCtCr">

    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">
        <div class="PnRe Wh100p">
            <input type="text" class="TxBxCnAe" placeholder=" " required>
            <label class="PnAe PnTp0p PnLt15 TmTeVe0p50p FtSe12 CrBdPe10Lt BrRs10 CrWe FtWt600 PgTpBm4 PgLtRt8">Label</label>
        </div>

        <div class="DyFx FxDnCn Wh100p">
            <label class="PgBm5 FtWt600 FtSe12">Label</label>
            <input class="TtBx" type="text" placeholder="Enter Your Name" />
        </div>
    </div>

</div>

Text Box with Font-Size

Source Code


<div class="DyFx FxJyCtCr">
    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">
        <input class="TtBx FtSe16" type="text" placeholder="Font-size : 16px" />
        <input class="TtBx FtSe18" type="text" placeholder="Font-size : 18px" />
        <input class="TtBx FtSe20" type="text" placeholder="Font-size : 20px" />
        <input class="TtBx FtSe22" type="text" placeholder="Font-size : 22px" />
        <input class="TtBx FtSe24 " type="text" placeholder="Font-size : 24px" />
    </div>
</div>

Text Box with Label Effects

Name

Age

Source Code


<div class="DyFx FxJyCtCr">
    <div class="DyFx FxDnCn Gp20 Wh70p FxAnIsCr">

        <div class="TxBxCnAeCr">
            <input type="text" class="TxBxCnAe" placeholder=" " required>
            <label class="TxBxCnAeLl">Email</label>
        </div>


        <div class="TxBxCnAeCr">
            <input type="text" class="TxBxCnAe" placeholder=" " required>
            <label class="TxBxCnAeLl">Name</label>
        </div>

        <div class="TxBxCnAeCr">
            <input type="text" class="TxBxCnAe" placeholder="" required>
            <label class="TxBxCnAeLl">Age</label>
        </div>

    </div>
</div>

Web Tool

Welcome Amit

Logout

Change Password

Change Email