CSS 텍스트 상자 읽기 전용

웹사이트 디자인에서는 사용자가 입력한 정보를 저장하기 위해 텍스트 상자를 자주 사용합니다. 어떤 경우에는 이 텍스트 상자를 정보 표시에만 사용할 수 있고 수정할 수 없기를 바랍니다. 이때 CSS의 읽기 전용 속성을 사용해야 합니다.

HTML에서는 일반적으로 입력 태그를 사용하여 텍스트 상자를 만듭니다. 그 중 type 속성은 텍스트 상자, 비밀번호 상자, 이메일 등 입력 상자의 유형을 설정할 수 있습니다. 텍스트 상자를 읽기 전용으로 만들려면 읽기 전용 속성을 true로 설정해야 합니다. 예는 다음과 같습니다.

a5904c8a6067aff3c8ea6f700cb30a7a

위 코드에서 텍스트 상자의 값은 "johndoe"이고 읽기 전용 속성이 설정되어 있습니다. true, 즉 읽기 전용 상태입니다.

이제 CSS를 통해 텍스트 상자를 읽기 전용으로 만드는 방법을 살펴보겠습니다. 먼저 HTML에서 입력 요소를 찾은 다음 속성 선택기를 사용하여 읽기 전용 텍스트 상자를 선택해야 합니다. 속성 선택자는 속성 값을 기반으로 요소를 선택할 수 있습니다. 구문은 attribute=value입니다. 예를 들어 읽기 전용 텍스트 상자를 선택하려면 다음 코드를 사용할 수 있습니다.

input[readonly] {

background-color: #eee;

}

위 코드는 읽기 전용 속성이 있는 모든 입력 요소의 배경색을 회색으로 설정합니다. . 특정 유형의 텍스트 상자만 선택하려면 다음과 같이 작성할 수 있습니다.

inputtype="text" {

background-color: #eee;

}

이렇게 하면 유형 속성이 "text"이고 읽기 전용 속성이 다음인 모든 입력 요소가 선택됩니다. true이고 배경색을 회색으로 설정합니다. 선택 범위를 더 제한하려면 클래스 또는 ID 선택기와 같은 다른 선택기를 사용할 수 있습니다.

배경색 변경 외에도 다른 CSS 스타일을 사용하여 읽기 전용 텍스트 상자를 표시할 수도 있습니다. 예를 들어 텍스트 상자의 색상, 테두리, 글꼴 등을 변경할 수 있습니다. 다음은 몇 가지 일반적인 읽기 전용 텍스트 상자 스타일입니다.

/ 텍스트 상자를 편집할 수 없도록 설정 /
input[readonly] {

-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;

}

/ 텍스트 상자 테두리 제거 /
input[readonly] {

border: none;

}

/ 텍스트 상자의 배경색, 글꼴 색상 및 글꼴 크기를 변경합니다./
input[readonly] {

background-color: #f0f0f0;
color: #333;
font-size: 14px;

}

즉, CSS의 읽기 전용 속성을 사용하면 사용자가 입력한 정보가 수정되지 않도록 텍스트 상자를 읽기 전용 상태로 쉽게 설정할 수 있습니다. CSS 스타일을 조정하여 텍스트 상자의 표시 효과를 변경하여 웹 사이트의 디자인 스타일과 더 일관되게 만들 수도 있습니다.

위 내용은 CSS 텍스트 상자 읽기 전용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!