css - Layout shift when applying a 2px border to a 1px field on focus - Stack Overflow

admin管理员组

文章数量:1133769

I'm struggling to achieve the same result as Flowbite form fields. They seem to use a 1px border on focus (with a 2px transparent outline) but the result looks like a 2px border...

How to prevent layout shift when applying a 2px border to a 1px field on focus?

My pen

Relevant piece:

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  border: 1px solid #ccc;
}

#contact input:focus,
#contact textarea:focus {
  border-color: tomato;
  border-width: 2px; /* Flowbite form fields seem to have a 1px border */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

I'm struggling to achieve the same result as Flowbite form fields. They seem to use a 1px border on focus (with a 2px transparent outline) but the result looks like a 2px border...

How to prevent layout shift when applying a 2px border to a 1px field on focus?

My pen

Relevant piece:

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  border: 1px solid #ccc;
}

#contact input:focus,
#contact textarea:focus {
  border-color: tomato;
  border-width: 2px; /* Flowbite form fields seem to have a 1px border */
  outline: 2px solid transparent;
  outline-offset: 2px;
}

• css

Share Improve this question Follow asked Jan 7 at 21:27 ideassideass 3111 silver badge55 bronze badges 2

• this should help: bekk.christmas/post/2023/05/with-box-shadow-instead-of-border – Armen Commented Jan 7 at 21:36
• 2 Thank you. I received the correct answer in Staging Ground and I'm waiting for the user to post it so I can accept it. A 1px "box-shadow" did it. – ideass Commented Jan 7 at 21:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The correct answer was commented in Staging Ground by user @vincentdecaux:

"On Flowbite, they use a box shadow to make the "border" thicker. Keep a border-width at 1px, and add the CSS to your input:focus to have the same effect: box-shadow: tomato 0px 0px 0px 0px, tomato 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;"

本文标签： cssLayout shift when applying a 2px border to a 1px field on focusStack Overflow