[HTML/CSS] input 테두리 아래만 남기기, 없애기 (border, outline)

 

input 필드를  스타일링하는 방법을 알아보고 있습니다.

[HTML/CSS] input 배경색, 글자색 변경하기

[HTML/CSS] input 커서 색상 변경하기 (caret-color)

[HTML/CSS] input 커서 없애기

 

 

이번에는 input 필드의 테두리를 없애는 방법, 아래쪽에만 테두리를 남기는 방법을 알아보겠습니다.

또한, input 필드에 마우스를 가져가면 나타나는 테두리도 같이 없애보도록 하겠습니다.

 

 

border-width

input 필드의 테두리를 없애기 위해 border 속성을 이용할 수 있습니다.

 

 

  예제  

<input type='text' 
       placeholder='no border' 
       class='no-border'/>
<input type='text' 
       placeholder='bottom border' 
       class='bottom-border'/>

input {
  background-color: #FFF8DC;
}

.no-border {
  border-width: 0;
}

.bottom-border {
  border-width: 0 0 1px;
}

 

 

첫번째 input 필드

border-width를 0으로 설정하여 모든 테두리를 없앴습니다.

 

두 번째 input 필드

border-width에 3개의 값을 정의하면,

첫 번째는 위쪽, 두 번째는 왼쪽과 오른쪽, 세 번째는 아래쪽(bottom)의 테두리 굵기를 지정할 수 있습니다.

여기서는, 아래쪽의 테두리 굵기만 1px로 정의하였습니다.

 

 

일단, input 필드의 테두리는 모두 제거했지만, 

input 필드를 클릭하면 테두리가 다시 나타납니다.

이 테두리도 없애보도록 하겠습니다.

 

 

outline

outline의 속성을 none으로 정의하여

input 필드에 마우스 포커스가 갔을 때 나타나는 테두리를 없앨 수 있습니다.

 

  예제  

<input type='text' 
       placeholder='no border' 
       class='no-border'/>
<input type='text' 
       placeholder='bottom border' 
       class='bottom-border'/>

input {
  background-color: #FFF8DC;
}

input:focus {
  outline: none;
}

.no-border {
  border-width: 0;
}

.bottom-border {
  border-width: 0 0 1px;
}

 

 

 

outline 속성값을 'none'으로 지정하였습니다.

이제, input 필드에 포커스를 이동해도 테두리가 생기지 않습니다.