Change the floating label color of the textbox in EJ2 TypeScript 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.ts
index.html
styles.css
import { InputObject, TextBox } from '@syncfusion/ej2-inputs';

let warningFloatTextBox: TextBox = new TextBox({
    placeholder: 'Warning',
    cssClass: 'e-warning',
    floatLabelType: 'Auto',
  });
  warningFloatTextBox.appendTo('#warning');
  let successIconTextBox: TextBox = new 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>
</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;
  }