Override the Form Control Color


Topic: Override the Form Control Color

Neanrakyr pro asked 2 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


Neanrakyr pro commented 2 years ago

Nice Premium Support


Marta Szymanska staff pro premium commented 2 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


FREE CONSULTATION

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

Status

Closed

Specification of the issue
  • User: 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