How To

Set the rounded corner

Render the TextBox with rounded corner by adding the e-corner class to the input parent element.

tagHelper
rounded-corner.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
			<div class="e-input-group e-corner">
            <input class="e-input" type="text" placeholder="Enter Date" />
            <span class="e-input-group-icon e-input-popup-date"></span>
        </div>

        <div class="e-float-input e-input-group e-corner">
            <input type='text' required />
            <span class="e-float-line"> </span>
            <label class="e-float-text">Enter Date </label>
            <span class="e-input-group-icon e-input-popup-date"></span>
        </div>
        </div>
</div>
}

@section Script{
 <script>
       ej.base.enableRipple(true);

		// To get the all input fields and its container.

		var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

		// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

		for (var i = 0; i < inputElement.length; i++) {
			inputElement[i].addEventListener("focus", function () {
				var parentElement = this.parentNode;
				if (parentElement.classList.contains('e-input-in-wrap')) {
					parentElement.parentNode.classList.add('e-input-focus');
				} else {
					this.parentNode.classList.add('e-input-focus');
				}
			});
			inputElement[i].addEventListener("blur", function () {
				var parentElement = this.parentNode;
				if (parentElement.classList.contains('e-input-in-wrap')) {
					parentElement.parentNode.classList.remove('e-input-focus');
				} else {
					this.parentNode.classList.remove('e-input-focus');
				}
			});
		}

		// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

		var inputIcon = document.querySelectorAll('.e-input-group-icon');
		for (var i = 0; i < inputIcon.length; i++) {
			inputIcon[i].addEventListener('mousedown', function () {
				this.classList.add('e-input-btn-ripple');
			});
			inputIcon[i].addEventListener('mouseup', function () {
				var element = this;
				setTimeout(function () {
					element.classList.remove('e-input-btn-ripple');
				}, 500);
			});
		}

</script>
}
<style>
.e-input-group-icon:before {
  font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
  font-size:16px;
}

.e-input-group.e-small .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
  font-size:14px;
}

.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-up:before { /* csslint allow: adjoining-classes */
  content: '\e85e';
}

.e-input-group-icon.e-input-down:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-plus:before { /* csslint allow: adjoining-classes */
  content: '\e7ba';
}

.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes */
  content: '\e814';
}

.e-input-group-icon.e-input-date:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-left:before { /* csslint allow: adjoining-classes */
  content: '\e904';
}

.e-input-group-icon.e-input-right:before { /* csslint allow: adjoining-classes */
  content: '\e913';
}

.e-input-group-icon.e-input-reload:before { /* csslint allow: adjoining-classes */
  content: '\e837';
}

.e-input-group-icon.e-input-search:before { /* csslint allow: adjoining-classes */
  content: '\e806';
}

#input-container .e-input-group { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

#input-container .e-float-input { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Set the disabled state

Disable the TextBox by adding the e-disabled to the input parent element and set disabled attribute to the input element.

tagHelper
disabled.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
			<input class="e-input" type="text" placeholder="Enter Name" disabled/>

			<div class="e-float-input e-disabled">
				<input type='text' required  disabled/>
				<span class="e-float-line"></span>
				<label class="e-float-text">Enter Name</label>
			</div>
        </div>
</div>
}

@section Script{
 <script>
        ej.base.enableRipple(true);

		// To get the all input fields and its container.

		var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

		// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

		for (var i = 0; i < inputElement.length; i++) {
			inputElement[i].addEventListener('focus', function () {
				var parentElement = this.parentNode;
				if (parentElement.classList.contains('e-input-in-wrap')) {
					parentElement.parentNode.classList.add('e-input-focus');
				} else {
					this.parentNode.classList.add('e-input-focus');
				}
			});
			inputElement[i].addEventListener('blur', function () {
				var parentElement = this.parentNode;
				if (parentElement.classList.contains('e-input-in-wrap')) {
					parentElement.parentNode.classList.remove('e-input-focus');
				} else {
					this.parentNode.classList.remove('e-input-focus');
				}
			});
		}
</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Set the read-only TextBox

You can make the TextBox as read-only by setting the readonly attribute to the input element.

tagHelper
read-only.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
			<input class="e-input" type="text" placeholder="Enter Name" value="John" readonly/>

			<div class="e-float-input">
				<input type='text' required readonly value="John"/>
				<span class="e-float-line"></span>
				<label class="e-float-text e-label-top">Enter Name</label>
			</div>
        </div>
</div>
}

@section Script{
 <script>
       ej.base.enableRipple(true);

		// To get the all input fields and its container.

		var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

		// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

		for (var i = 0; i < inputElement.length; i++) {
			inputElement[i].addEventListener('focus', function () {
				this.parentNode.classList.add('e-input-focus');
			});
			inputElement[i].addEventListener('blur', function () {
				this.parentNode.classList.remove('e-input-focus');
			});
		}

</script>
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Add TextBox programmatically

  • Create a TypeScript file and import the Input modules from ej2-inputs library as shown below.
import {Input} from '@syncfusion/ej2-inputs';
  • Pass the HTML Input element as parameter to the createInput method.

  • You can also add the icons on the input by passing buttons property value with the class name e-input-group-icon as parameter to the createInput method.

tagHelper
textbox.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
			<div id="input-container">
        </div>
</div>
}

@section Script{
 <script>
        ej.base.enableRipple(true);

		// To get the all input fields and its container.

		var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

		// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

		for (var i = 0; i < inputElement.length; i++) {
			inputElement[i].addEventListener("focus", function () {
				this.parentNode.classList.add('e-input-focus')
			});
			inputElement[i].addEventListener("blur", function () {
				this.parentNode.classList.remove('e-input-focus')
			});
		}

		// Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

		var inputIcon = document.querySelectorAll('.e-input-group-icon');
		for (var i = 0; i < inputIcon.length; i++) {
			inputIcon[i].addEventListener('mousedown', function () {
				this.classList.add('e-input-btn-ripple');
			});
			inputIcon[i].addEventListener('mouseup', function () {
				var element = this;
				setTimeout(function () {
					element.classList.remove('e-input-btn-ripple');
				}, 500);
			});
		}

</script>
}

<style>
.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
  font-size:16px;
}

.e-input-group-icon:before {
  font-family: e-icons;
}

.e-input-group-icon.e-input-up:before { /* csslint allow: adjoining-classes */
  content: '\e85e';
}

.e-input-group-icon.e-input-down:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-plus:before { /* csslint allow: adjoining-classes */
  content: '\e7ba';
}

.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes */
  content: '\e814';
}

.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-date:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-left:before { /* csslint allow: adjoining-classes */
  content: '\e904';
}

.e-input-group-icon.e-input-right:before { /* csslint allow: adjoining-classes */
  content: '\e913';
}

.e-input-group-icon.e-input-reload:before { /* csslint allow: adjoining-classes */
  content: '\e837';
}

.e-input-group-icon.e-input-search:before { /* csslint allow: adjoining-classes */
  content: '\e806';
}

#input-container .e-input-group { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Add floating label to TextBox programmatically

The Floating Label TextBox floats label above the TextBox after focusing, or entering a value in the TextBox.

Floating label supports the types of actions as given below.

Type Description
Auto The floating label will float above the input after focusing, or entering a value in the input.
Always The floating label will always float above the input.
Never By default, never float the label in the input when the placeholder is available.
  • Create a TypeScript file and import the Input modules from ej2-inputs library as shown below.
import {Input} from '@syncfusion/ej2-inputs';
  • Pass the HTML Input element and floatLabelType property as Auto to the createInput method.

  • Set the placeholder value to the input element via element attribute or pass the parameter to the createInput method.

The watermark label will be updated based on the specified placeholder value of the Floating Label TextBox.

  • You can add the icons on the input by passing buttons property value with the class name e-input-group-icon as parameter to the createInput method.
tagHelper
floating-label.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
			  <div id="input-container">
				  <h4> FloatLabelType as Auto </h4>
			  </div>
			  <div id="input-container-01">
				  <h4> FloatLabelType as Always </h4>
			  </div>
			  <div id="input-container-02">
				  <h4> FloatLabelType as Never </h4>
			  </div>
			  <div id="input-container-03">
				  <h4> Float label input with icons </h4>
			  </div>
        </div>
</div>
}

@section Script{
 <script>
        ej.base.enableRipple(true);

		var inputObj;

		var element = <HTMLInputElement>document.createElement('input');
		document.getElementById('input-container').appendChild(element);
		Input.createInput({
			element: element,
			floatLabelType: "Auto",
			properties:{
				placeholder: 'Enter Name'
			}
		});

		var element2 = document.createElement('input');
		document.getElementById('input-container-01').appendChild(element2);
		Input.createInput({
			element: element2,
			floatLabelType: "Always",
			properties:{
				placeholder:'Enter Name'
			}
		});

		var element3 = document.createElement('input');
		document.getElementById('input-container-02').appendChild(element3);
		Input.createInput({
			element: element3,
			floatLabelType: "Never",
			properties:{
				placeholder:'Enter Name'
			}
		});

</script>
}
<style>
.e-input-group-icon:before {
  font-family: e-icons;
}

.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
  font-size:16px;
}

.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-up:before { /* csslint allow: adjoining-classes */
  content: '\e85e';
}

.e-input-group-icon.e-input-down:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-plus:before { /* csslint allow: adjoining-classes */
  content: '\e7ba';
}

.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes */
  content: '\e814';
}

.e-input-group-icon.e-input-date:before { /* csslint allow: adjoining-classes */
  content: "";
}

.e-input-group-icon.e-input-left:before { /* csslint allow: adjoining-classes */
  content: '\e904';
}

.e-input-group-icon.e-input-right:before { /* csslint allow: adjoining-classes */
  content: '\e913';
}

.e-input-group-icon.e-input-reload:before { /* csslint allow: adjoining-classes */
  content: '\e837';
}

.e-input-group-icon.e-input-search:before { /* csslint allow: adjoining-classes */
  content: '\e806';
}

#input-container-03 .e-input-group { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}

#input-container-03 .e-float-input { /* csslint allow: adjoining-classes */
  margin: 30px 0;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Change the floating label color of the TextBox

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;
    }
tagHelper
validation-state.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
			 <div className="e-float-input e-input-group e-success">
                    <input type='text' required />
                    <span className="e-float-line"></span>
                    <label className="e-float-text">Success</label>
                </div>
                <div className="e-float-input e-input-group e-warning">
                    <input type='text' required />
                    <span className="e-float-line"></span>
                    <label className="e-float-text">Warning</label>
                </div>
        </div>
</div>
}

@section Script{
 <script>
        ej.base.enableRipple(true);

		// To get the all input fields and its container.

		var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

		// Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

		for (var i = 0; i < inputElement.length; i++) {
			inputElement[i].addEventListener('focus', function () {
				var parentElement = this.parentNode;
				if (parentElement.classList.contains('e-input-in-wrap')) {
					parentElement.parentNode.classList.add('e-input-focus');
				} else {
					this.parentNode.classList.add('e-input-focus');
				}
			});
			inputElement[i].addEventListener('blur', function () {
				var parentElement = this.parentNode;
				if (parentElement.classList.contains('e-input-in-wrap')) {
					parentElement.parentNode.classList.remove('e-input-focus');
				} else {
					this.parentNode.classList.remove('e-input-focus');
				}
			});
		}
</script>
}

<style>
  .e-float-input.e-success label.e-float-text{ /* csslint allow: adjoining-classes */
    color: #22b24b;
  }
  .e-float-input.e-success input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
    color: #22b24b;
  }
  .e-float-input.e-success input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
    color: #22b24b;
  }
  
  .e-float-input.e-warning label.e-float-text{ /* csslint allow: adjoining-classes */
    color: #ffca1c;
  }
  .e-float-input.e-warning input:focus ~ label.e-float-text{ /* csslint allow: adjoining-classes */
    color: #ffca1c;
  }
  .e-float-input.e-warning input:valid ~ label.e-float-text { /* csslint allow: adjoining-classes */
    color: #ffca1c;
  }

	#loader {
		color: #008cff;
		height: 40px;
		left: 45%;
		position: absolute;
		top: 45%;
		width: 30%;
	}
	#input-container {
		width: 240px;
		margin: 0 auto;
		padding: 20px 0px;
	}

	.e-input-group-icon:before {
		font-family: e-icons;
	}

	.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
		font-size:16px;
	}

	.e-input-group.e-small .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
		font-size:14px;
	}

	.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
		content: "";
	}

	.e-input-group-icon.e-input-up:before { /* csslint allow: adjoining-classes */
		content: '\e85e';
	}

	.e-input-group-icon.e-input-down:before { /* csslint allow: adjoining-classes */
		content: "";
	}

	.e-input-group-icon.e-input-plus:before { /* csslint allow: adjoining-classes */
		content: '\e7ba';
	}

	.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes */
		content: '\e814';
	}

	.e-input-group-icon.e-input-date:before { /* csslint allow: adjoining-classes */
		content: "";
	}

	#input-container .e-input-group { /* csslint allow: adjoining-classes */
		margin: 26px 0;
	}

	#input-container .e-float-input { /* csslint allow: adjoining-classes */
		margin: 26px 0;
	}

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Output be like the below.

textbox

Change the color of the TextBox based on its value

You can change the color of the TextBox by validating its value using regular expression in the keyup event for predicting the numeric values as demonstrated in the following code sample.

tagHelper
text-color.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
    <div class="wrap">
        <div className="e-input-group">
            <input className="e-input" id="numericOnly" type="text" placeholder="Enter numeric values" onkeyup="onKeyup(this)"  />
        </div>
        <div class="e-float-input e-input-group">
            <input type="text" onkeyup="onKeyup(this)"  required/>
            <span class="e-float-line"></span>
            <label class="e-float-text">Enter numeric values</label>
        </div>
    </div>
</div>
}

@section Script{
 <script>
    ej.base.enableRipple(true);

    // To get the all input fields and its container.

    var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (var i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener('focus', function () {
            var parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.add('e-input-focus');
            } else {
                this.parentNode.classList.add('e-input-focus');
            }
        });
        inputElement[i].addEventListener('blur', function () {
            var parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.remove('e-input-focus');
            } else {
                this.parentNode.classList.remove('e-input-focus');
            }
        });
    }
    function onKeyup(e) {
        let str = e.value.match(/^[0-9]+$/);
        if (!((str && str.length > 0)) && e.value.length) {
            e.parentElement.classList.add('e-error');
        } else {
            e.parentElement.classList.remove('e-error');
        }
    }
</script>
}

<style>
    .e-input-group.e-error input.e-input { /* csslint allow: adjoining-classes */
    color: #f44336;
    }

    .e-float-input.e-error input { /* csslint allow: adjoining-classes */
    color: #f44336;
    }

    .wrap label { /* csslint allow: adjoining-classes */
    font-weight:bold;
    }

	#container {
        visibility: hidden;
    }
    
    .wrap {
        box-sizing: border-box;
        margin: 0 auto;
        padding: 20px 10px;
        width: 340px;
    }
    
    
    #input-container .e-float-input { /* csslint allow: adjoining-classes */
        margin: 30px 0;
    }

	#loader {
		color: #008cff;
		height: 40px;
		left: 45%;
		position: absolute;
		top: 45%;
		width: 30%;
	}
	#input-container {
		width: 240px;
		margin: 0 auto;
		padding: 20px 0px;
	}

	.e-input-group-icon:before {
		font-family: e-icons;
	}

	.e-input-group .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
		font-size:16px;
	}

	.e-input-group.e-small .e-input-group-icon.e-input-popup-date { /* csslint allow: adjoining-classes */
		font-size:14px;
	}

	.e-input-group-icon.e-input-popup-date:before { /* csslint allow: adjoining-classes */
		content: "";
	}

	.e-input-group-icon.e-input-up:before { /* csslint allow: adjoining-classes */
		content: '\e85e';
	}

	.e-input-group-icon.e-input-down:before { /* csslint allow: adjoining-classes */
		content: "";
	}

	.e-input-group-icon.e-input-plus:before { /* csslint allow: adjoining-classes */
		content: '\e7ba';
	}

	.e-input-group-icon.e-input-minus:before { /* csslint allow: adjoining-classes */
		content: '\e814';
	}

	.e-input-group-icon.e-input-date:before { /* csslint allow: adjoining-classes */
		content: "";
	}

	#input-container .e-input-group { /* csslint allow: adjoining-classes */
		margin: 26px 0;
	}

	#input-container .e-float-input { /* csslint allow: adjoining-classes */
		margin: 26px 0;
	}

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Output be like the below.

textbox

Add floating label to read-only textbox

You can achieve floating label for read-only textboxes by adding/removing e-label-top and e-label-bottom classes to the label element

In this sample, click the update value button to fill the read-only textbox with value and float a label.

tagHelper
float-read-only.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
        <div class="control_wrapper accordion-control-section">
			<div class="e-float-input">
				<input class="e-input myField" id="myText" name="readonlyAttr"  type="text" readOnly>
				<span class="e-float-line"></span>
				<label class="e-float-text">Enter value</label>
			</div>
			<ejs-button class="e-btn update_value" id='valuebtn' >Set value</ejs-button>
            <ejs-button class="e-btn remove_value" id='removebtn' >Remove value</ejs-button>
        </div>
</div>
}

@section Script{
 <script>
       ej.base.enableRipple(true);
      
	  document.getElementById('valuebtn').onclick = () => {
        (document.getElementsByClassName('myField')[0]).value = '10';
        checkFloatingLabel('myText')
      }
      document.getElementById('removebtn').onclick = () => {
        (document.getElementsByClassName('myField')[0]).value = '';
        checkFloatingLabel('myText')
      })

  function checkFloatingLabel(id): void {
    var inputElement=  document.getElementById(id);
    var labelElement = inputElement.parentElement.querySelector('.e-float-text');
    if (inputElement.value !== '') {
        labelElement.classList.remove('e-label-bottom');
        labelElement.classList.add('e-label-top');
    } else {
      labelElement.classList.remove('e-label-top');
      labelElement.classList.add('e-label-bottom');
    }
  }
  var inputField = document.getElementById('myText');

</script>
}

<style>
.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 260px;
}

.update_value, .remove_value {
    margin-top: 20px;
}

.remove_value {
    margin-left: 10px;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}

Customize the textbox background-color and text-color

You can customize the textbox styles such as background-color, text-color and border-color by overriding its default styles.

To change the styles of the floating label, you must override the style to the input element.

tagHelper
textbox-customize.cs
@using Syncfusion.EJ2

@section ControlsSection{
<div class="control-section">
    <div class="wrap">
        <div className="e-input-group">
            <input className="e-input" type="text" placeholder="First Name" />
        </div>
        <div class="e-float-input">
            <input type="text" required/>
            <span class="e-float-line"></span>
            <label class="e-float-text">Last Name</label>
        </div>
    </div>
</div>
}

@section Script{
 <script>
    ej.base.enableRipple(true);

    // To get the all input fields and its container.

    var inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (var i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener('focus', function () {
            this.parentNode.classList.add('e-input-focus');
        });
        inputElement[i].addEventListener('blur', function () {
            this.parentNode.classList.remove('e-input-focus');
        });
    }
</script>
}

<style>

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  width: 260px;
}

.wrap label { /* csslint allow: adjoining-classes */
 font-weight:bold;
}

.wrap .e-float-input {/* csslint allow: adjoining-classes */
   margin:30px 0;
}

.wrap .e-input-group {/* csslint allow: adjoining-classes */
   margin:25px 0;
}


/* To change the background-color and text-color for textbox */ 
.e-input-group,
.e-float-input,
.e-float-input.e-input-group { /* csslint allow: adjoining-classes */
  background : yellow;
  color: green;
}

/* To change the border-color of the textbox */ 
.e-input-group:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left),
.e-input-group:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) { /* csslint allow: adjoining-classes */
  border-color: #0800ff;
}

/* To change the border-color of the floating-label textbox */ 
.e-float-input input,
.e-float-input:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]) { /* csslint allow: adjoining-classes */
    border-color: #0800ff;
}


</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class TextboxController : Controller
    {
        // GET: //
        public IActionResult DefaultFunctionalities()
        {
            return View();
        }
    }
}