view
html
1
2
3
4
5
6
7
8
<!-- textarea -->
<textarea class="o-input o-input--textarea" title="댓글" placeholder="댓글을 입력하세요."></textarea>
<!-- textarea + required -->
<textarea class="o-input o-input--textarea" required title="댓글" placeholder="댓글을 입력하세요."></textarea>
<!-- textarea + error : is-error 클래스 생성 -->
<textarea class="o-input o-input--textarea is-error" title="댓글" placeholder="댓글을 입력하세요.">is-error</textarea>
Screen Reader 지원
| 속성 | Sense Reader | NVDA | VoiceOver | TalkBack |
|---|---|---|---|---|
| required | X | O | O | X |
Screen Reader 음성 출력
- Sense Reader
댓글을 입력하세요. 멀티라인 편집창
댓글을 입력하세요. 멀티라인 편집창
댓글을 입력하세요. is-error 멀티라인 편집창 - NVDA
댓글을 입력하세요. 편집창 멀티 라인 댓글 빈줄
댓글을 입력하세요. 편집창 필요함 입력 오류 멀티 라인 댓글 빈줄
댓글을 입력하세요. 편집창 멀티 라인 댓글 is-error - VoiceOver
댓글, 댓글을 입력하세요, 여러 줄 텍스트 필드
댓글, 댓글을 입력하세요, 여러 줄 텍스트 필드, 필수 사항
댓글, is-error, 여러 줄 텍스트 필드 - TalkBack
수정창 댓글을 입력하세요 댓글
수정창 댓글을 입력하세요 댓글
is-error 수정창 댓글을 입력하세요 댓글
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// textarea
.o-input--textarea {
display: block;
width: 100%;
height: 100%;
padding: 15px;
border: 1px solid #ccc;
background-color: #fff;
font-size: 15px;
resize: none;
&:hover,
&:focus {
border-color: #000;
}
&[readonly],
&:disabled {
border-color: #ccc !important; // hover, focus 시 border color 변경 X
background-color: #f4f4f4;
cursor: default;
}
}