CODEWITHSUNDEEP
htmlcss
Jeiman
Jeiman

Reputation: 1181

Input text shrinks after entering details into the field

I have a problem with my contact form. Every time when I enter some details into the input text field (where you usually fill up your name), it shrinks down by a bit when i start to enter details into the email field after.

May I know why it's doing such a thing. I know i have a border of 1 pixel declared into the input element, but that shouldn't disturb the field after there is value inside right?

Would appreciate some help on this.

Code:

http://jsfiddle.net/24G6z/1/

Thank you.

Upvotes: 0

Views: 1061

Answers (1)

Mr. Loop
Mr. Loop

Reputation: 187

your problem is with

input:focus { 
     border:0;
}

because your email field has a special selector for it (see below), it doesn't experience any border change (and no glitch)

input[type="email"] {
    border:0
}

However, your name field has a border:1px solid #58B9FA applied to it. When the user focuses on it, that border is removed (because of the :focus selector) and you get that jerky motion.

Hope it helps!

Upvotes: 1

Related Questions