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

내가있어 DIV이있는 contentEditable=true사용자가 편집 할 수 있습니다. 문제는 텍스트 필드처럼 보이지 않기 때문에 편집 할 수 있다는 것이 사용자에게 명확하지 않을 수 있다는 것입니다.

DIV사용자에게 텍스트 입력 필드처럼 보이도록 스타일을 지정할 수있는 방법이 있습니까?

이것들은 Safari, Chrome 및 Firefox의 실제 대응 물과 동일하게 보입니다. 그들은 우아하게 저하되고 Opera와 IE9에서도 괜찮아 보입니다.

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

CSS :

textarea {
    height: 28px;
    width: 400px;
}

#textarea {
    -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 {
    margin-top: 5px;
    width: 400px;
}

#input {
    -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 id="textarea" contenteditable>I look like textarea</div>

<input value="I am an input" />
<div id="input" contenteditable>I look like an input</div>

산출:

부트 스트랩을 사용하는 경우 form-control클래스를 추가하십시오 . 예를 들면 :

class="form-control" 

WebKit에서 다음을 수행 할 수 있습니다. -webkit-appearance: textarea;

내부 상자 그림자로 이동할 수 있습니다.

div[contenteditable=true] {
  box-shadow: inset 0px 1px 4px #666;
}

Jarish에서 jsfiddle을 업데이트했습니다. http://jsfiddle.net/ZevvE/2/

Jarish의 예에서 확장 된 Chrome의 스타일과 일치하기 위해 이것을 제안합니다. 이전 답변이 생략 된 커서 속성을 확인하십시오.

cursor: text;
border: 1px solid #ccc;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 200px;
overflow: auto;
padding: 2px;
resize: both;
-moz-box-shadow: inset 0px 1px 2px #ccc;
-webkit-box-shadow: inset 0px 1px 2px #ccc;
box-shadow: inset 0px 1px 2px #ccc;

DIV 아래에 비슷한 크기의 TEXTAREA를 배치 할 수 있으므로 표준 컨트롤의 프레임이 div 주위에 표시됩니다.

실수로 초점을 훔치는 것을 방지하기 위해 비활성화하도록 설정하는 것이 좋습니다.

이 모든 것의 문제는 텍스트 줄이 길고 div overflow : auto가 올바르게 작동하는 스크롤 막대를 광고하지 않는 것보다 훨씬 더 넓은 경우 해결하지 않는다는 것입니다. 내가 찾은 완벽한 솔루션은 다음과 같습니다.

두 개의 div를 만듭니다. 가장 넓은 텍스트 줄을 처리 할 수있을만큼 충분히 넓은 내부 div와 내부 div의 홀더 역할을하는 작은 외부 div :

<div style="border:2px inset #AAA;cursor:text;height:120px;overflow:auto;width:500px;">
    <div style="width:800px;">

     now really long text like this can be put in the text area and it will really <br/>
     look and act more like a real text area bla bla bla <br/>

    </div>
</div>