How to change default blue colors to green of forms in Prestashop 8.2.1

[Peter_17]

Hello,

I changed standard blue color of forms in my template this way:

.form-control:active, .form-control:hover {
  background-clip: padding-box;
  background-color: #fff;
  border: 1px solid #008082;
  border-radius: .4rem;
  color: #495057;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  height: calc(1.5em + 1rem + 2px);
  line-height: 1.5;
  padding: .5rem 1rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  box-shadow: 0 0 5px  #008082;
}

When the input field is not "hover" is still blue? How to change that? 3rd picture.

How to change blue dot before Mr.?

[Mehdi Bourechka]

3 minutes ago, Peter_17 said:

Hello,

I changed standard blue color of forms in my template this way:

.form-control:active, .form-control:hover {
  background-clip: padding-box;
  background-color: #fff;
  border: 1px solid #008082;
  border-radius: .4rem;
  color: #495057;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  height: calc(1.5em + 1rem + 2px);
  line-height: 1.5;
  padding: .5rem 1rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  box-shadow: 0 0 5px  #008082;
}

When the input field is not "hover" is still blue? How to change that? 3rd picture.

How to change blue dot before Mr.?

To take care of the regular (default state) blue styles, you’ll also want to override the base input styles, something like:

.form-control {
  border: 1px solid #008082; /* your green */
  box-shadow: none;           /* remove blue focus glow if needed */
}
 

The best way is simply to inspect the elements with your browser’s developer tools, find the exact CSS selectors for the blue colors, and replace those values with your green.

Just search for the color code (like #0d6efd) and override it in your custom CSS.

[Peter_17]

Thanks for help.

I finally did it this way:

.form-control:active, .form-control:hover, .form-control:focus {
  background-clip: padding-box;
  background-color: #fff;
  border: 1px solid #008082;
  color: #495057;
  display: block;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  box-shadow: 0 0 5px  #008082;
}

.custom-select:active, .custom-select:hover, .custom-select:focus  {
  border: 1px solid #008082;
  color: #495057;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  box-shadow: 0 0 5px  #008082;
}