Customize the textbox background-color and text-color

21 Dec 20222 minutes to read

You can customize the textbox styles such as background-color, text-color and border-color by overriding its default styles.

NOTE

To change the styles of the floating label, you must override the style to the input element.

<div class="control-section">
    <div class="wrap">

        <ejs-textbox id="textbox" placeholder="First Name"></ejs-textbox>
      
        <ejs-textbox id="float-textbox" placeholder="Last Name" floatLabelType="Auto"></ejs-textbox>
    </div>
</div>

<style>

    .wrap {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 20px 10px;
        width: 260px;
    }

    .wrap label { /* csslint allow: adjoining-classes */
        font-weight: bold;
    }

    .wrap .e-float-input { /* csslint allow: adjoining-classes */
        margin: 30px 0;
    }

    .wrap .e-input-group { /* csslint allow: adjoining-classes */
        margin: 25px 0;
    }
    
    .e-float-input.e-input-group input, .e-float-input.e-input-group.e-control-wrapper input,
    .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input { 
        background : yellow;
        color: green;
    }

    /* To change the border-color of the textbox */
    .e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
    .e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) { /* csslint allow: adjoining-classes */
        border-color: #0800ff;
    }

    /* To change the border-color of the floating-label textbox */
    .e-float-input input,
    .e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]) { /* csslint allow: adjoining-classes */
        border-color: #0800ff;
    }
</style>
public ActionResult Index()
{
    return View();
}