CODEWITHSUNDEEP
htmlcss
007mrviper
007mrviper

Reputation: 519

Textbox size reduces/shrinks on focus

On focus the size of textbox seems reduced/shrinked. But, if the border-width is set to 2px then such reduction can't be observed. I want to set the border-width to 1px but without such reduction like effect. How can it be 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 to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

Upvotes: 3

Views: 2400

Answers (3)

user6485550
user6485550

Reputation: 94

Such problem can be solved by introducing padding on the boxes where ever effect on focus has to be added.
I added padding:2px on the default setting. Padding:2px can be added on focus also but your problem can be solved by adding on default setting only. Have a look at the snippet.

#name:focus{
	outline:none;
	border:1px solid rgba(81, 203, 238, 1);
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
    padding: 2px;
}

#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 to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

Upvotes: 2

The F
The F

Reputation: 3714

You have multiple approaches here. For example you could set the default border-width to 1px(#name2) or increase the 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 to 2px on focus<br>
  Padding <input type="text" id='name'><br>
  Border default is set to 1px<br>

  Border <input type="text" id='name2'><br>
  Check <input type="text" id='check'>
</body>
</html>

Upvotes: 1

Haresh Kumar
Haresh Kumar

Reputation: 539

Try this

#name:focus{
	outline:none;
	border-color:rgba(81, 203, 238, 1);
        border-style: ridge;
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}

#name2:focus{
	outline:none;
	border-color:rgba(81, 203, 238, 1);
        border-style: ridge;
	box-shadow:0 0 5px rgba(81, 203, 238, 1);
}
<!doctype  html>
<html>
<head>
</head>
<body>
  Border-width changes to 1px on focus<br>
  <input type="text" id='name'><p>
  Border-width changes to 2px on focus<br>
  <input type="text" id='name2'><p>
  Default textbox no effects added<br>
  <input type="text" id='check'>
</body>
</html>

Upvotes: 0

Related Questions