Topic: Override the Form Control Color
Neanrakyr pro asked 4 years ago
Hello after many hours, I do not find the solution.
I would like to edit the form-control color by override it on scss files but it's doesnt work.
So in the MDB Folder, in the custom folder I create a new _form-control-custom and _variables.
I past it in the files :
.form-control {
&:focus {
box-shadow: none;
transition: all 0.1s linear;
border-color: $blueice!important;
box-shadow: inset 0px 0px 0px 1px $blueice!important;
}
}
// Form File
.form-file-input {
&:focus-within ~ .form-file-label {
border: none;
border-color:
$form-file-label-focus-border-color; box-shadow: 0px 0px 0px 1px $blueice;
}
}
In variable :
// Colors
$blueice: #4abde8;
// Form
// Check
$form-check-input-checked-focus-border-color: $blueice;
$form-check-input-checkbox-checked-background-color: $blueice;
$form-check-input-checkbox-checked-focus-background-color: $blueice;
$form-check-input-indeterminate-focus-background-color: $blueice;
$form-check-input-indeterminate-focus-border-color: $blueice;
$form-check-input-radio-checked-after-border-color: $blueice;
$form-check-input-radio-checked-after-background-color: $blueice;
$form-switch-form-check-input-checked-checkbox-after-background-color: $blueice;
// Control
$input-focus-label-color: $blueice;
$input-focus-border-color: $blueice;
// File
$form-file-label-focus-border-color: $blueice;
// Input
$input-group-focus-border-color: $blueice;
When I compile, nothing happen and form-control on focus still the default color.
I add in the mdb.pro.scss the custom variable, i try on the bellow and above of mdb.pro
Here is the form i'm using. https://mdbootstrap.com/docs/standard/forms/overview/
Can you help me to solved it. Thank you
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: 1.0.0
- Device: Desktop / Mobile
- Browser: Any
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Neanrakyr pro commented 4 years ago
Nice Premium Support
Marta Wierzbicka staff commented 4 years ago
Hi,
first of all, I apologize for the late response. I'll try to help you. Are you sure you have imported your custom-variable.scss and form-control-custom.scss files on the top of mdb.free.scss file? Would you show me a screenshot how your files in mdb.free.scss or mdb.pro.scss looks like? Also, you can send me your project in .ZIP extension on m.szymanska@mdbootstrap.com and I can have a look at it. Again, I'm sorry for the late response.
Best, Marta