CSS : input tag border 안보이게 하는 법

웹 개발을 하다보면 input 태그를 사용할 때 태그를 감싸고 있는 border를 보이지 않게 하고 싶을 때가 있다.

간단하게 border none 옵션을 주면 될꺼 같지만 

input box 를 다시 클릭하면 focus 되어 border 가 살아난다.

따라서 아래와 같이 적절히 조합하여 CSS 를 사용하면 된다.

input {
  border: none;
  &:focus {
    outline: none;
  }
}

 

추가적으로 아래쪽에만 border 를 주어 위치를 표시시키는 것이 이쁜 경우가 많다.

아래와 같이 주면 CSS 를 줘본다.

input {
  border: none;
  border-bottom: 1px solid black;
  &:focus {
    outline: none;
  }
}