편집 가능한 DIV의 스타일을 텍스트 필드처럼 보이도록 하려면 어떻게 해야 합니까?

편집 가능한 DIV를 텍스트 필드와 유사하게 만들기

종종 사용자가 다음을 사용하여 웹 페이지의 특정 섹션을 편집할 수 있도록 허용하는 것이 바람직할 수 있습니다. 편집 가능한 DIV. 그러나 DIV 요소에는 당연히 편집 가능성을 나타내는 시각적 단서가 부족하여 사용자가 해당 요소와 상호 작용할 수 있는지 여부를 확신할 수 없습니다.

이 문제를 해결하기 위해 CSS 스타일을 사용하여 편집 가능한 DIV를 표준 텍스트 입력 필드. 다행스럽게도 최신 브라우저는 기본 텍스트 입력 컨트롤의 모양을 모방하는 특정 CSS 속성을 제공합니다.

텍스트 필드와 유사한 DIV를 위한 CSS 스타일

다음 CSS 코드는 다음을 수행할 수 있습니다. DIV에 적용하여 텍스트 필드와 같은 모양을 제공합니다.

#textarea {
  -moz-appearance: textfield-multiline;
  -webkit-appearance: textarea;
  border: 1px solid gray;
  font: medium -moz-fixed;
  font: -webkit-small-control;
  height: 28px;
  overflow: auto;
  padding: 2px;
  resize: both;
  width: 400px;
}

또한 특정 스타일을 DIV에 적용할 수 있습니다. 현실감을 더하기 위한 textarea 요소:

textarea {
  height: 28px;
  width: 400px;
}

텍스트 필드와 유사한 입력을 위한 CSS 스타일

마찬가지로, 다음을 사용하여 입력의 스타일을 텍스트 필드와 유사하게 지정할 수 있습니다. 수행원 CSS:

#input {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  background-color: white;
  background-color: -moz-field;
  border: 1px solid darkgray;
  box-shadow: 1px 1px 1px 0 lightgray inset;  
  font: -moz-field;
  font: -webkit-small-control;
  margin-top: 5px;
  padding: 2px 3px;
  width: 398px;    
}

input {
  margin-top: 5px;
  width: 400px;
}

출력

결과 HTML 및 CSS는 다음과 같은 출력을 생성합니다.

[텍스트 영역 이미지 및 입력, 둘 다 텍스트 필드처럼 보이도록 스타일 지정]

이 스타일은 Safari, Chrome 및 Firefox와 호환됩니다. Opera 및 IE9에서는 정상적으로 성능이 저하됩니다.

위 내용은 편집 가능한 DIV의 스타일을 텍스트 필드처럼 보이도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!