CODEWITHSUNDEEP
htmlcssfirefox
januaryananda
januaryananda

Reputation: 407

Textbox styling in CSS returns full border when left blank and lost focus

After typing some characters in textbox then delete it and then moving cursor (lost focus), the textbox will have a full red shadowed-border. How to remove that so it will only have red-colored bottom border just like first condition?

CSS CODE :

[type='text']:invalid{
    padding             : 5px 10px 5px 10px;
    width               : 100px;
    border              : none;
    border-bottom       : 2px solid red;
    transition          : all 0.2s ease;
    -webkit-transition  : all 0.2s ease;
    -moz-transition     : all 0.2s ease;
    -o-transition       : all 0.2s ease;
}

[type='text']:valid {
    padding             : 5px 10px 5px 10px;
    width               : 100px;
    border              : none;
    border-bottom       : 2px solid green;
    transition          : all 0.2s ease;
    -webkit-transition  : all 0.2s ease;
    -moz-transition     : all 0.2s ease;
    -o-transition       : all 0.2s ease;
}

Here's the fiddle

Edit :

Issue seems to be with mozilla firefox as chrome is working fiine!!

Upvotes: 1

Views: 158

Answers (1)

akash
akash

Reputation: 2157

try this

input[type='text']
{
   box-shadow: none;
}

http://jsfiddle.net/m01sknz8/1/

Upvotes: 4

Related Questions