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.
<!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/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" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<div id="input-container">
<input id="firstName"/>
</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: 30px 10px;
width: 260px;
}
.e-input-group .e-style {
background-color: antiquewhite;
}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.
import { TextBox } from '@syncfusion/ej2-inputs';
// Initialize TextBox component with cssClass 'e-filled'
let filledTextBox: TextBox = new TextBox({
placeholder: 'Filled',
cssClass: 'e-filled',
floatLabelType: 'Auto'
});
filledTextBox.appendTo('#filled');
// Initialize TextBox component with cssClass 'e-outline'
let outlineTextBox: TextBox = new 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="//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="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<label class="custom-input-label"> Filled TextBox </label>
<div id='container'>
<input id='filled'></input>
</div>
<label class="custom-input-label"> Outlined TextBox </label>
<div id='container1'>
<input id='outlined'></input>
</div>
</body>
</html>Note: Filled and Outline theme customization are available only with Material theme.