[HTML/CSS] input 배경색 투명하게 하기

 

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

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

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

[HTML/CSS] input 커서 없애기

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

[HTML/CSS] input 클릭 시 테두리 색상 변경

 

 

이번에는 input 필드의 배경색을 투명하게 하는 방법입니다.

 

background-color: transparent;

background-color 속성의 값을 transparent로 지정하면,

배경색을 투명하게 합니다.

 

 

  예제  

 

위 예제에는 3개의 input 필드가 있습니다.

그리고, 그 3개의 input 필드는 배경이 노란색인 <div>위에 있습니다.

 

첫번째 input 필드

배경색을 지정하지 않았습니다.

배경색은 기본값인 흰색입니다.

 

두번째 input 필드

background-color를 transparent로 지정하였습니다.

input 필드의 배경이 투명하기 때문에, <div>의 색깔인 노란색이 배경색으로 보여집니다.

 

세번째 input 필드

background-color를 orange로 지정하였습니다.

input 필드의 배경색이 orange 색으로 보여집니다.