편집 가능한 DIV를 텍스트 필드처럼 보이게 하려면 어떻게 해야 합니까?

텍스트 필드의 매력으로 편집 가능한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!