Change the form input control indicator color on focus

Topic: Change the form input control indicator color on focus

devtrix pro asked 4 years ago

Hi, I need to change the "indicator" color that shows at the bottom of a text input when it receives focus. I need to change this default "blue" to something else, like green. Any help is much appreciated. Apologize for this dumb question.

Marta Szymanska staff pro premium answered 4 years ago

Hello, First of all, there are no dumb questions. We are here to help MDB Users. Second of all, below you have solution. Add to your CSS this code:
input[type=text]:focus:not([readonly]) + label {
            color: green; 

        input[type=text]:focus:not([readonly]) {
            border-bottom: 1px solid green;
            box-shadow: 0 1px 0 0 green; 
Of course, you can change green to any hex color you wish. Best, Marta

devtrix pro answered 4 years ago

Thank you for your kind words and your solution! That worked. Regards, Raj
I know that's a quite old post, but is there a way to change the color of all input types with a single CSS rule? Without specify every single input that I want to override.

David Schartner pro premium answered 5 months ago


how can I change the icon color as well?

<div class="md-form form-sm"> <i class="fas fa-user prefix"></i>
        <input type="text" id="form3" class="form-control form-control-sm">
        <label for="form3">Your name</label>

Thanks for help.


Krzysztof Wilk staff commented 5 months ago


About changing icon color you can read here:

All you have to do is add class with your color, for example .amber-text or .orange-text :)

Hi! How can i change icon color when input is focused?

MDBInput name="email" label="Эл. почта" icon="envelope"  type="email" 

My input

I've changed border color, and i also need to change icon color

Tomek Makowski staff answered 4 months ago


Just try to use input:focus {} ~ i pseudo class in your css rules


Pasha Pshenishnyuk commented 4 months ago

That's not working Icon is still blue whatever i do

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No