Having trouble getting help?
Contact Support
Contact Support
Set the rounded corner in Angular TextBox component
2 Jul 20255 minutes to read
Render the TextBox with rounded corner
by adding the e-corner
class to the cssClass property of the TextBoxComponent.
This rounded corner visible only in box model input component
import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
@Component({
imports: [
TextBoxModule
],
standalone: true,
selector: 'app-root',
template: `<div class="wrap">
<ejs-textbox placeholder="Enter Date" floatLabelType="Auto" cssClass="e-outline e-corner"></ejs-textbox>
</div>`
})
export class AppComponent {
}
.e-corner .e-input-group-icon.e-input-popup-date::before {
content: '\e960';
}
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
margin: 0 auto;
padding: 20px 10px;
width: 260px;
}
.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;
}
.e-input-group.e-error .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;
}
.wrap .e-float-input {/* csslint allow: adjoining-classes */
margin:30px 0;
}
.wrap .e-input-group {/* csslint allow: adjoining-classes */
margin:25px 0;
}
.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';
}
.e-input-group.e-outline.e-corner,
.e-input-group.e-outline.e-corner.e-input-focus {
border-radius: 20px
}