Change the form input control indicator color on focus

Topic: Change the form input control indicator color on focus

devtrix pro asked 7 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.

Add comment

Tomek Makowski staff answered 4 years ago

0 0 Best answer

Try this

https://mdbootstrap.com/snippets/jquery/tomekmakowski/2140361

Regards

Add comment

Tomek Makowski staff answered 4 years ago

0 0 Best answer

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

Regards

Pasha Pshenishnyuk free commented 4 years ago

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

Add comment

Pasha Pshenishnyuk free answered 4 years ago

0 0 Best answer

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

siddagz free commented 3 years ago

Try this, in scss

.md-form label.active { color: black !important; }

.md-form .prefix.active { color: blue !important; }

Hi, u said you changed the border color, can help me on that?

Marcin Luczak staff commented 3 years ago

Hi @siddagz,

Depending on which version of the MDB you want to use you can try these styles for changing the border of the input:For MDB4 (jquery version):

`.md-form input:focus { border-bottom: 1px solid red !important; box-shadow: 0 1px 0 0 #f76363 !important; // you can here use any reddish color or just use 'none' to disable any box-shadow}

.md-form label.active { color: red !important;}`

For MDB5 (standard non jquery version):

`.form-control:focus ~ .form-label{ color: red !important;}

.form-control:focus ~ .form-notch div { border-color: red !important;}`

Keep coding, Marcin

Please insert min. 15 characters.

Add comment

David Schartner free answered 4 years ago

0 0 Best answer

Hi,

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>
</div>

Thanks for help.

David

Krzysztof Wilk staff commented 4 years ago

Hi!

About changing icon color you can read here: https://mdbootstrap.com/docs/react/content/icons-usage/

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

Add comment

paolo.guerra free answered 7 years ago

0 0 Best answer

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.

Add comment

devtrix pro answered 7 years ago

0 0 Best answer

Thank you for your kind words and your solution! That worked. Regards, Raj

Add comment

Marta Wierzbicka staff answered 7 years ago

1 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

devtrix

Pro User 84Support score
23Questions 12Answers 1Snippets