Search results

Style and Appearance in JavaScript 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.html
index.css
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://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>
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
app.ts
index.html
Copied to clipboard
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');
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://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.