Topic: Override the Form Control Color

Neanrakyr pro asked 3 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; 
        $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 the custom variable, i try on the bellow and above of

Here is the form i'm using.

Can you help me to solved it. Thank you

Neanrakyr pro commented 3 years ago

Nice Premium Support

Marta Wierzbicka staff commented 3 years ago


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 file? Would you show me a screenshot how your files in or looks like? Also, you can send me your project in .ZIP extension on and I can have a look at it. Again, I'm sorry for the late response.

Best, Marta


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • 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