Change the floating label color of the textbox in EJ2 JavaScript Textbox control

15 May 20235 minutes to read

You can change the floating label color of the TextBox for both success and warning validation states by applying the following CSS styles.

    /* For Success state */
    .e-float-input.e-success label.e-float-text,
    .e-float-input.e-success input:focus ~ label.e-float-text,
    .e-float-input.e-success input:valid ~ label.e-float-text {
      color: #22b24b;
    }

    /* For Warning state */
    .e-float-input.e-warning label.e-float-text,
    .e-float-input.e-warning input:focus ~ label.e-float-text,
   .e-float-input.e-warning input:valid ~ label.e-float-text {
      color: #ffca1c;
    }

index.js
index.html
styles.css
ej.base.enableRipple(true);

var warningFloatTextBox = new ej.inputs.TextBox({
    placeholder: 'Warning',
    cssClass: 'e-warning',
    floatLabelType: 'Auto',
  });
  warningFloatTextBox.appendTo('#warning');
  var successIconTextBox = new ej.inputs.TextBox({
    placeholder: 'Success',
    cssClass: 'e-success',
    floatLabelType: 'Auto',
  });
  successIconTextBox.appendTo('#success');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 TextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 TextBox Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
                <div id="input-container">

                    <div>
                        <input id="warning" type="text" />
                      </div>
            
                      <div>
                        <input id="success" type="text" />
                      </div>

            </div>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
  }
  
  #loader {
    color: #008cff;
    font-family: 'Helvetica Neue','calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
  }
  
  .wrap {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 10px;
    width: 340px;
  }
  
  .e-float-input.e-input-group.e-success label.e-float-text,
  .e-float-input.e-input-group.e-success input:focus ~ label.e-float-text,
  .e-float-input.e-input-group.e-success input:valid ~ label.e-float-text {
      color: #22b24b;
  }
  .e-float-input.e-input-group.e-warning label.e-float-text,
  .e-float-input.e-input-group.e-warning input:focus ~ label.e-float-text,
  .e-float-input.e-input-group.e-warning input:valid ~ label.e-float-text {
      color: #ffca1c;
  }