> 웹 프론트엔드 > CSS 튜토리얼 > 편집 가능한 DIV를 텍스트 필드처럼 보이게 하려면 어떻게 해야 합니까?

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

Susan Sarandon
풀어 주다: 2024-11-30 17:52:12
원래의
162명이 탐색했습니다.

How Can I Make Editable DIVs Look Like Text Fields?

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿