ContentEditable DIV의 스타일을 텍스트 필드처럼 보이게 하려면 어떻게 해야 합니까?

편집 가능한 DIV를 텍스트 필드로 스타일링

contentEditable=true를 사용하여 편집 가능한 콘텐츠가 포함된 DIV를 생성할 때 사용자는 이를 즉시 인식하지 못할 수 있습니다. 기본 모양으로 인해 편집될 수 있습니다. 이 문제는 표준 텍스트 입력 필드와 유사하도록 DIV의 스타일을 지정하여 해결할 수 있습니다.

이러한 시각적 유사성을 달성하려면 다음 CSS 스타일을 활용할 수 있습니다.

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

이러한 스타일은 테두리를 제공합니다. , 오버플로를 통해 높이 조정 가능, 텍스트 필드에 적합한 글꼴 설정.

또한 입력 {} 섹션에 사용자 정의 스타일을 포함하여 텍스트를 더욱 향상시킬 수 있습니다. 필드형 디자인:

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

#inputted-div {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    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;    
}

여기서 입력 내용이 다른 요소에 너무 가깝게 표시되는 것을 방지하기 위해 여백을 추가하고 배경색, 테두리, 그림자를 사용자 정의하여 일관된 모양과 느낌을 얻었습니다. .

이러한 CSS 스타일을 구현하면 편집 가능한 DIV를 시각적으로 매력적인 텍스트 필드로 변환하여 사용자에게 콘텐츠를 수정할 수 있다는 점을 분명히 할 수 있습니다.

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