텍스트 필드처럼 보이도록 DIV의 스타일을 지정하는 방법은 무엇입니까?

텍스트 필드 모양을 모방하기 위해 DIV 스타일을 지정하는 방법

contentEditable이 활성화된 DIV 요소가 있는 경우 사용자는 해당 콘텐츠를 편집할 수 있습니다. . 그러나 기본 스타일은 편집 가능한 특성을 전달하지 못할 수도 있습니다. 이 기사에서는 DIV를 텍스트 입력 필드처럼 표시하는 솔루션을 살펴봅니다.

CSS 및 HTML 스타일링

제공된 CSS 및 HTML 샘플은 DIV 스타일을 지정하는 방법을 보여줍니다. 텍스트 영역 및 입력 필드와 유사합니다. CSS에는 다양한 브라우저를 지원하는 공급업체 접두사 스타일이 포함되어 있습니다.

출력

결과 출력은 Safari, Chrome 및 Chrome의 실제 텍스트 필드와 시각적으로 구별할 수 없는 편집 가능한 DIV를 생성합니다. 파이어폭스. Opera 및 IE9에서도 허용 가능하게 표시됩니다.

데모 및 샘플 코드

작동 데모를 보려면 제공된 jsfiddle URL을 방문하세요.

http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS 및 HTML 코드 샘플이 아래에 제공됩니다. 참조:

CSS:

textarea {
    /* shared properties */
    height: 28px;
    width: 400px;
}

#textarea {
    /* textarea-specific properties */
    -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;
}

input {
    /* shared properties */
    margin-top: 5px;
    width: 400px;
}

#input {
    /* input-specific properties */
    -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;    
}

HTML:

<textarea>I am a textarea</textarea>
<div><p>이러한 스타일링 기술을 자신의 코드에 통합하세요. 시각적으로 매력적이고 직관적으로 편집 가능한 DIV 요소를 만들 수 있습니다.</p></div>

위 내용은 텍스트 필드처럼 보이도록 DIV의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!