[CSS] input 태그 테두리 색상, 테두리 둥글게, 클릭 시 테두리 색상 변경

이번 글은 input 태그의 테두리 크기, 선 종류, 색상을 변경하는 방법과

테두리를 둥글게 만드는 방법, input 태그 클릭 시

테두리 색상을 변경 하는 방법을 알아보도록 하겠습니다.

 

input type 기준은 text를 기준으로 작업할 예정이며,

테두리 크기, 선 종류, 색상 속성은

대부분 공통으로 사용할 수 있으니 div나 label 등에서도

모두 사용할 수 있습니다.

 

 

---

전체 목록

 

• input 태그의 테두리 크기, 선 종류, 색상을 지정
• input 태그 테두리 둥글게
• input 클릭 시 (포커스) 테두리 색상 변경
• input 태그 테두리 색상, 둥글게, 포커스 시 테두리 꾸미기

---

1. input 태그의 테두리 크기, 선 종류, 색상을 지정

 

좀 잘보이게 div 하나 만들고 padding을 줘서 내부 요소와 거리를 뒀습니다.

css input 쪽에 보이는 'border' 쪽이 테두리를 변경하는 부분입니다.

 

차례대로 크기, 선 종류, 색상을 지정했고

원하시는 크기, 선, 색상을 지정하시면 됩니다.

 

See the Pen Untitled by wpfhorez4 (@wpfhorez4) on CodePen.

 

 

 

2. input 태그 테두리 둥글게

 

기존에 있는 것에서 'border-radius' 를 주어 뒤에 숫자만큼 4군데

테두리를 둥글게 만들어 줍니다.

 

See the Pen [CSS] input 테두리 둥글게 by wpfhorez4 (@wpfhorez4) on CodePen.

 

 

 

3. input 클릭 시 (포커스) 테두리 색상 변경

 

css는 input 태그의 focus 시 조건이 걸리며

변경하는 속성은 'outline' 을 이용하여 테두리를 변경합니다.

 

이때 outline 테두리는 요소의 border 와는 다른 속성으로

div의 'display: inline-block' 속성에 영향을 받지 않습니다.

 

See the Pen [CSS] input 클릭 시 테두리 색상 변경 by wpfhorez4 (@wpfhorez4) on CodePen.

 

 

 

4. input 태그 테두리 색상, 둥글게, 포커스 시 테두리 꾸미기

 

위 3가지를 모두 합쳐 input 태그를 꾸민다는 가정하에

한 번 만들어 보았습니다.

 

See the Pen [CSS] input 태그 테두리 꾸미기 및 클릭 시 테두리 꾸미기 by wpfhorez4 (@wpfhorez4) on CodePen.