[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로 지정하면,

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

 

 

  예제  

<div class='bg'>
  <input type='text' 
         placeholder='default'/>
  <input type='text' 
         placeholder='transparent'
         class='no-bgcolor'/>
  <input type='text' 
         placeholder='orange'
         class='orange-bgcolor' />
</div>

.bg {
  background-color: yellow;
}

.no-bgcolor {
  background-color: transparent;
}

.orange-bgcolor {
  background-color: orange;
}

 

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

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

 

첫번째 input 필드

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

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

 

두번째 input 필드

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

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

 

세번째 input 필드

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

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