Style appearance in EJ2 JavaScript Textbox control

29 Aug 20236 minutes to read

The Theme Studio for Essential JS 2 can be used to customize a new theme from an existing theme. It allows modification and preview for primary font and color as well as secondary font and color of the chosen theme. This section covers the instructions and techniques to customize the appearance and styling of the TextBox component beyond the basic requirement provided by the theme studio.

Note: The styling and customization provided in this section will be applied globally for all the Textbox in the page when used as such. To apply the customization only to a specific textbox component, the cssClass property can be used. cssClass API adds the custom class attribute to the textbox component, using which the styling can be restricted to the specific component.

index.js
index.html
styles.css
var inputobj = new ej.inputs.TextBox({
    placeholder: 'First Name',
    floatLabelType: 'Auto',
    cssClass: 'e-style'
});
inputobj.appendTo('#firstName');
<!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="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <div id="input-container">
                <input id="firstName">
          </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: 30px 10px;
  width: 260px;
}

.e-input-group .e-style {
  background-color: antiquewhite;
}

Filled and Outline mode

The Filled and Outline modes can be enabled in the Textbox component by adding the e-outline or e-filled class to the cssClass API.

index.js
index.html
styles.css
// Initialize TextBox component with cssClass 'e-filled'
var filledTextBox = new ej.inputs.TextBox({
    placeholder: 'Filled',
    cssClass: 'e-filled',
    floatLabelType: 'Auto'
});
filledTextBox.appendTo('#filled');

// Initialize TextBox component with cssClass 'e-outline'
var outlineTextBox = new ej.inputs.TextBox({
    placeholder: 'Outlined',
    cssClass: 'e-outline',
    floatLabelType: 'Auto'
});
outlineTextBox.appendTo('#outlined');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Multiline</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 TextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    
    <label class="custom-input-label"> Filled TextBox </label>
    <div id="container">
        <input id="filled">
    </div>
    <label class="custom-input-label"> Outlined TextBox </label>
    <div id="container1">
        <input id="outlined">
    </div>

 <script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
.multiline{
  margin: 30px auto;
  width: 30%;
}
#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

Note: Filled and Outline theme customization are available only with Material theme.