CODEWITHSUNDEEP
javascriptjquerycss
ildar
ildar

Reputation: 185

Change on hover and on focus class after masked input js was added

I have added jQuery-Mask-Plugin and everything works fine but after I have added it I can't style my input field.

Here what I get:

Input form: 

<div class="field">
    <label for="phone">Enter your phone number</label>
    <input type="phone" class="form-control phone" id="phone" aria-describedby="set Phone">
</div>

and here is standard on focus style that works great if I don't use this js

.order-form input[type='phone']:focus {border: 1px solid #345564; color: #345564;}

So then I create js file: 

$(function(){$('#phone').mask('+7(000) 000-0000');});

So, problem is that now, after I added this js and linked jQuery-Mask-Plugin

and my text color is white not blue one.

Could you help me to show how I can stye this text?

Upvotes: 1

Views: 617

Answers (1)

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

In your site you have the next html

<input type="email" class="form-control phone" id="phone" aria-describedby="Укажите номер" maxlength="16" style="color: rgb(99, 99, 99);">

As you can see, you have the inline style grey color for you text.

To solve your problem you can use the important tag or remove that inline style that has a bigger priority than you css style.

Example using !important

.order-form input[type='email']:focus {
  border: 1px solid #345564;
  color: #345564!important;
}

Note: !important tag isn't the best practice. Use it with care.

Hope this helps :)

Upvotes: 1

Related Questions