Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.
Use the following CSS to customize the appearance of wrapper element.
.e-ddl.e-input-group.e-control-wrapper .e-input {
font-size: 20px;
font-family: emoji;
color: #ab3243;
background: #32a5ab;
}Use the following CSS to customize the dropdown icon’s color.
.e-ddl.e-input-group .e-input-group-icon,.e-ddl.e-input-group.e-control-wrapper .e-input-group-icon:hover {
color: #bb233d;
font-size: 13px;
}Use the following CSS to customize the focusing color of input element.
.e-ddl.e-input-group.e-control-wrapper.e-input-focus::before, .e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {
background: #c000ff;
}Use the following CSS to customize the focusing color of outline theme.
.e-outline.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),.e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),.e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),.e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
border-color: #b1bd15;
box-shadow: inset 1px 1px #b1bd15, inset -1px 0 #b1bd15, inset 0 -1px #b1bd15;
}Use the following CSS to customize the text color when the component is disabled.
.e-input-group.e-control-wrapper .e-input[disabled] {
-webkit-text-fill-color: #0d9133;
}Use the following CSS to customize the focusing color of float label element.
.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after {
background-color: #2319b8;
}
.e-ddl.e-lib.e-input-group.e-control-wrapper.e-float-input.e-input-focus .e-float-text.e-label-top {
color: #2319b8;
}Use the following CSS to customize the text color of placeholder.
.e-ddl.e-input-group input.e-input::placeholder {
color: red;
}Use the following CSS to customize the background color of focus, hover and active item’s.
.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
background-color: #1f9c99;
color: #2319b8;
}Use the following CSS to customize the appearance of popup element.
.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
background-color: #29c2b8;
color: #207cd9;
font-family: emoji;
min-height: 29px;
}You can add a mandatory asterisk(*) to placeholder and float label using .e-input-group.e-control-wrapper.e-float-input .e-float-text::after class.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
// specifies the template string for the DropDownList component with dataSource
template: `<ejs-dropdownlist id='ddlelement' [dataSource]='data' placeholder = 'Select a game' floatLabelType="auto"></ejs-dropdownlist>`
})
export class AppComponent {
constructor() {
}
// defined the array of data
public data: string[] = ['Snooker', 'Tennis', 'Cricket', 'Football', 'Rugby'];
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, DropDownListModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
top: 45%;
left: 45%;
}
#wrapper {
width: 250px;
margin: 0 auto;
}
.e-input-group.e-control-wrapper.e-float-input .e-float-text::after {
content: '*';
color: red;
}