Search results

Style and Appearance in JavaScript (ES5) TextBox control

18 May 2022 / 3 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.

Source
Preview
index.js
index.html
index.css
Copied to clipboard
var inputobj = new ej.inputs.TextBox({
    placeholder: 'First Name',
    floatLabelType: 'Auto',
    cssClass: 'e-style'
});
inputobj.appendTo('#firstName');
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.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>
Copied to clipboard
#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.

Source
Preview
index.js
index.html
Copied to clipboard
// 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');
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.1.55/dist/ej2.min.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>

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