Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
pavz
10,309 PointsHow to fix a :focus border size increasing effect in the form?
How to make the input and textarea to be still when outline :focus-ing them? See how it increases in size when you pick it? How to avoid it?
Check the project out: https://github.com/pzhestkov/Project_3
2 Answers
Georgi Georgiev
11,122 PointsHi Pavel,
It seems that the initial state of "input, text area and select" is with "border: none" defined. On the focus state you have defined a "2px solid color" which makes the element to grow in size as of total 4 px in width and height. This way you expand and push the rest of the layout.
My suggestion is to define a transparent border on the normal state of these elements such as "border: 2px solid rgba(0, 0, 0, 0);" This will still add those additional pixels, but when you click on the elements the only change will be in the color. :)
Other usefull technique is to use the box-sizing CSS property. You can read more about it here: http://learnlayout.com/box-sizing.html
I hope that this has answered your question :)
Cheers!
pavz
10,309 PointsNiiice:) Georgi, thanks for the tip. It works now. Good luck and see you around;)