Topic: MDB SELECT STYLING
stokkup2313
priority
asked 4 days ago
Expected behavior I SHOULD BE ABLE TO CHANGE THE STYLING OF THE INPUTS & SELECTS
Actual behavior Currently this library makes it EXTREMELY difficult to change the styling of an input, select component. its ridiculous..
first for my mdb-select i need to remove the border / outline. i want to be able to adjust the background color. i want to change the font family, font size. then when i select the dropdown, i need to be able to change the styling inside of that. as well as the styling of the dropdown like the border/outline..
then i need to be able to do the same with the inputs too..
can you guys make some updates to your documentation that provides steps on how to adjust these things...
Resources (screenshots, code snippets etc.)
<mdb-form-control class="flex-grow-1 me-2" style="width: 90%!important;">
<mdb-select [(ngModel)]="opportunityData.company" (ngModelChange)="selectCompany($event)"
[filter]="true" name="company" placeholder="Select Company" [compareWith]="compareCompanies">
<mdb-option class="" *ngFor="let client of clients" [value]="client">
{{ client.client_company }}
</mdb-option>
</mdb-select>
</mdb-form-control>
<mdb-form-control class="mt-2 mb-2">
<input mdbInput type="text" id="opportunitName" class="form-control w-100"
placeholder="Add Opportunity Name / Title" [(ngModel)]="opportunityData.name" name="name" />
</mdb-form-control>
Arkadiusz Idzikowski
staff
answered 3 days ago
For most of the components we have a very detailed list of CSS and SCSS variables which you can find in the API section in the documentation: https://mdbootstrap.com/docs/angular/forms/select/#api-section-css-variables.
Overwriting such variables should make basic component customization (colors, font size, etc.) much easier. However, to completely change the look of a given component, you will probably have to create custom CSS code. Unfortunately, we do not have any guides showing how to do this, because there are so many possible use cases that it would be difficult to create a universal guide.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 5.2.0
- Device: Desktop
- Browser: Chrome
- OS: MacOs
- Provided sample code: No
- Provided link: No