텍스트 필드의 매력으로 편집 가능한 DIV 만들기
편집 가능한 사용자 인터페이스를 디자인할 때 사용자에게 대화형 요소를 시각적으로 알리는 것이 중요합니다. contentEditable이 활성화된 DIV는 편집 가능한 기능을 제공하지만 모양이 직관적이지 않을 수 있습니다. 다행스럽게도 CSS 기술을 사용하면 DIV를 변환하여 텍스트 필드의 미학을 모방할 수 있습니다.
한 가지 접근 방식은 브라우저별 모양을 활용하는 것입니다. Safari, Chrome 및 Firefox의 경우:
#textarea { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; } #input { -moz-appearance: textfield; -webkit-appearance: textfield; }
이 CSS는 각각 텍스트 영역과 텍스트 입력 필드를 시뮬레이션합니다.
브라우저 간 호환성을 선호하는 경우 다음 스타일을 사용하면 유사한 결과를 얻을 수 있습니다. 결과:
#textarea { border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 400px; } #input { 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; }
이러한 조정을 통해 편집 가능한 DIV는 친숙한 텍스트 필드 모양을 갖게 되어 기능이 더욱 향상됩니다. 사용자 친화적입니다.
위 내용은 편집 가능한 DIV를 텍스트 필드처럼 보이게 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!