html - Textbox size reduces/shrinks on focus -
on focus size of textbox seems reduced/shrinked. but, if border-width set 2px such reduction can't observed. want set border-width 1px without such reduction effect. how can done?
#name:focus{ outline:none; border:1px solid rgba(81, 203, 238, 1); box-shadow:0 0 5px rgba(81, 203, 238, 1); } #name2:focus{ outline:none; border:2px solid rgba(81, 203, 238, 1); box-shadow:0 0 5px rgba(81, 203, 238, 1); }<!doctype html> <html> <head> </head> <body> border-width changes 1px on focus<br> <input type="text" id='name'><p> border-width changes 2px on focus<br> <input type="text" id='name2'><p> default textbox no effects added<br> <input type="text" id='check'> </body> </html>
you have multiple approaches here. example set default border-width 1px(#name2) or increase padding on focus(#name).
#name2 { border:1px solid rgba(81, 203, 238, 1); } #name2:focus, #name:focus{ outline:none; border:1px solid rgba(81, 203, 238, 1); box-shadow:0 0 5px rgba(81, 203, 238, 1); } #name:focus{ padding: 2px; }<!doctype html> <html> <head> </head> <body> padding changes 2px on focus<br> padding <input type="text" id='name'><br> border default set 1px<br> border <input type="text" id='name2'><br> check <input type="text" id='check'> </body> </html>
Comments
Post a Comment