:read-only
:read-only CSS의 의사 클래스 (예 소자 나타내는 input 또는 textarea 사용자에 의해 편집 가능하지 않다).
Try it
Syntax
Examples
읽기 전용 / 읽기-쓰기 컨트롤에서 양식 정보 확인
readonly 양식 컨트롤 의 한 가지 용도는 사용자가 이전 양식 (예 : 배송 세부 정보)에 입력했을 수있는 정보를 확인하고 확인할 수있는 동시에 나머지 양식과 함께 정보를 제출할 수 있도록하는 것입니다. 아래 예제에서이 작업을 수행합니다.
: :read-only 의사 클래스는 입력을 클릭 가능한 필드처럼 보이게 하는 모든 스타일을 제거하여 읽기 전용 단락처럼 보이게 하는 데 사용됩니다. 반면 에 :read-write 의사 클래스는 편집 가능한 <textarea> 에 더 멋진 스타일을 제공하는 데 사용됩니다 .
input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; }
전체 소스 코드는 readonly-confirmation.html 에서 찾을 수 있습니다 . 이것은 다음과 같이 렌더링됩니다.
읽기 전용 비 양식 컨트롤 스타일 지정
이 선택기는 <input> / <textarea> 요소만 선택 하는 것이 아니라 사용자가 편집할 수 없는 요소를 선택합니다.
<p contenteditable>This paragraph is editable; it is read-write.</p> <p>This paragraph is not editable; it is read-only.</p>
p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; }
Specifications
Browser compatibility
1 | 13 | 78 1.5 | No | 9 | 4 | ≤37 | 18 | 4 | 10.1 | 3.2 | 1.0 |
See also
- :read-write
- HTML contenteditable 속성
예
선택한 스타일 만 입력 요소 인 경우, "readonly" :
input:-moz-read-only { /* For Firefox */
background-color: yellow;
}
input:read-only {
background-color: yellow;
}
»그것을 자신을 시도
정의 및 사용
: 읽기 전용 선택은 요소 선택 "readonly" .
A의 양식 요소 "readonly" 속성으로 정의 된 "readonly" .
현재 대부분의 브라우저에서 : 읽기 전용 선택은 입력 텍스트 영역 요소에 적용하지만, 모든 요소에 적용해야합니다 "readonly" .
CSS3 |
브라우저 지원
: 읽기 전용 선택은 크롬, 사파리와 오페라에서 지원됩니다.
읽기 전용 선택 : Internet Explorer는 지원하지 않습니다.
읽기 -moz-전용 선택 : 파이어 폭스는이 대안을 지원합니다.
:read-only | 예 | 지원되지 않음 | -moz- | 예 | 예 |
CSS 구문
:read-only {
css declarations ;
}
관련 페이지
CSS 선택기 : 읽기 - 쓰기
:read-only 예제
<style>
input:-moz-read-write {background-color: yellow;} /* Firefox */
input:read-write {background-color: yellow;}
input:-moz-read-only {background-color: pink;} /* Firefox */
input:read-only {background-color: pink;}
</style>
<p>읽기 O , 쓰기 O : <input value="Homzzang.com"></p>
<p>읽기 O , 쓰기 X : <input readonly value="Homzzang.com"></p>
결과보기
- ��� ���� ����[9]
- ���� ���� ������å ����[5]
- �⼮üũ�� �����Ǿ����ϴ�.[11]
- ��������Ʈ
- �⼮üũ
- ����������
- �Ϲ�
ȸ�� - ���
ȸ��
- HTML/JS/CSS/jQuery/Ajax �������亯
- HOME > Q&A > HTML/JS/CSS/jQuery/Ajax �������亯
- �������
readonly �Ӽ��� ������ ��Ÿ�� ���� ���� | ||
��ġ���� | �� ¥10-07-23 13:31 | �� ȸ7463 |
//www.phpschool.com/link/qna_html/175088 ���� SyntaxHighlight�� ���� | ||
<input type=text readonly> �̷��� Ȩ������ ��ü����
|
- �������
- �ű� ��õ �亯 ��ȸ
- �Խù� 84,261��
����
0��õ 3�亯���� 8��ȸ
0��õ 0�̴亯 46��ȸ
0��õ 7�亯�Ϸ� 151��ȸ
0��õ 4�亯�Ϸ� 152��ȸ
0��õ 4�亯�Ϸ� 108��ȸ
0��õ 3�亯���� 101��ȸ
0��õ 6�亯�Ϸ� 47��ȸ
0��õ 1�亯���� 35��ȸ
0��õ 2�亯���� 64��ȸ
0��õ 3�亯�Ϸ� 40��ȸ
0��õ 1�亯���� 28��ȸ
0��õ 2�亯���� 71��ȸ
0��õ 2�亯�Ϸ� 58��ȸ
0��õ 2�亯���� 34��ȸ
0��õ 5�亯�Ϸ� 35��ȸ
0��õ 4�亯���� 86��ȸ
0��õ 1�亯���� 57��ȸ
0��õ 6�亯�Ϸ� 44��ȸ
0��õ 1�亯���� 50��ȸ
0��õ 2�亯�Ϸ� 155��ȸ
1 2 3 4 5 6 7 8 9 10