CSS input type으로 선택

1 개요

CSS input type으로 선택

text input만 스타일 적용

input type별 스타일 적용

• input 셀렉터로 스타일을 주면 텍스트 박스, 버튼, 라디오 버튼 등 모든 input 태그에 적용된다.
• 좀더 구체적으로… 셀렉터를 input[type=타입]으로 쓰면 선택적으로 적용 가능

input[type=타입] { 
  /* 스타일 내용 */
}

2 예제 코드

• input 전체의 배경색을 노란색으로
• 텍스트 input만 테두리를 빨간 점선으로
• 버튼 input만 테두리를 파란 실선으로

<style>
input { background-color: yellow }
input[type=text] { border:dotted 2px red }
input[type=button] { border:solid 2px blue }
</style>
<input type='text' value='텍스트1' />
<input type='text' value='텍스트2' />
<input type='button' value='버튼1' />
<input type='button' value='버튼2' />

• 예제: http://zetawiki.com/ex/css/by_input_type.php

3 같이 보기

• jQuery input type으로 선택
• CSS input name으로 선택
• CSS 셀렉터

4 참고

• http://css-tricks.com/styling-texty-inputs-only/