form 입력창 border 설정 소소한 팁

좌측은 목표 이미지이고 우측은 직접 마크업한 이미지이다.

내가 해결하고자 하는 문제는 두 가지이다.

 

1. 좌측과 같이 이메일 입력란과 비밀번호 입력란 사이에 border가 겹쳐보이지 않을 것

 

2. focus 시 위에서 언급한 부분의 box-shadow가 묻혀보이지 않을 것

 

 

html 마크업은 다음과 같이 작성했다.

CSS는 다음과 같이 작성했다.

 

문제1 해결

각각의 input에 border-top, border-left, border-right...이렇게 설정하는 방법은 좋지 않아보였다. 고민하다가 클론 대상 사이트를 뜯어보고 발견한 방법은 바로 input의 겹치는 한쪽에 margin-bottom을 -1px을 주는 것이었다.

margin-bottom: -1px; 적용 결과

 

문제2 해결

focus 시 z-index를 주어 box-shadow가 묻히지 않도록 했다.

z-index 적용 결과