CODEWITHSUNDEEP
htmlcss
batuman
batuman

Reputation: 7304

Why my text box's border color doesn't grow?

I have a textbox as follow.

<div class="form-group">
                    <label for="passwordr">Repeat Password</label>
                    <input type="password" class="form-control" required="" name="passwordr" value="">
                    <span class="help-block">Type the password again. Passwords must match.</span>


  </div>

I am expecting to have a textbox with a glowing colour when the user click the textbox.

But it doesn't happen now. Please see it here.

I have another setting, it works here.

I think pretty much the same.

The second one has rounded corner and the light grows. Why the first one doesn't have rounded corner and the light doesn't glow?

EDIT:

img

Upvotes: 1

Views: 70

Answers (2)

Gautam Jha
Gautam Jha

Reputation: 1473

!imporant for apply css forcefully and effects same as bootstrap.

.form-control:focus{ 
 box-shadow: 0 0 5px rgba(81, 203, 238, 1) !important;
   border: 1px solid rgba(81, 203, 238, 1) !important;

}

Working Fiddle

Upvotes: 1

JRS
JRS

Reputation: 31

If you want an input to have a different/special appearance once selected, use the :focus CSS pseudo-class.

A simple example:

#myInput:focus {
    border: 1px solid red;
}

PS. I assume you mean "glow", not "grow", and certainly not "blow" :-)

Upvotes: 0

Related Questions