CSS Form Selector (속성 선택자)

폼 요소를 타입별로 선택할 때 사용하는 CSS 속성 선택자입니다.

기본 문법

input[type="text"]
input[type="password"]
input[type="email"]

주요 폼 선택자

/* 텍스트 입력 필드 */
input[type="text"] {
    border: 1px solid #ccc;
    padding: 8px;
}

/* 비밀번호 필드 */
input[type="password"] {
    border: 1px solid #999;
}

/* 체크박스 */
input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* 라디오 버튼 */
input[type="radio"] {
    margin-right: 5px;
}

/* 제출 버튼 */
input[type="submit"], 
button[type="submit"] {
    background-color: #007bff;
    color: white;
    cursor: pointer;
}

/* 파일 업로드 */
input[type="file"] {
    padding: 5px;
}

속성 선택자 종류

[attr]속성이 존재하는 요소
[attr=value]정확히 일치
[attr^=value]시작 값 일치
[attr$=value]끝 값 일치
[attr*=value]포함 여부

활용 예시

/* 필수 입력 필드 */
input[required] {
    border-left: 3px solid red;
}

/* disabled 상태 */
input:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* placeholder 스타일 */
input::placeholder {
    color: #999;
    font-style: italic;
}