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

편집 가능한 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/

---

I would suggest this for matching Chrome's style, extended from Jarish's example. Notice the cursor property which previous answers have omitted.

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;

---

You can place a TEXTAREA of similar size under your DIV, so the standard control's frame would be visible around div.

It's probably good to set it to be disabled, to prevent accidental focus stealing.

---

The problem with all these is they don't address if the lines of text are long and much wider that the div overflow:auto does not ad a scroll bar that works right. Here is the perfect solution I found:

Create two divs. An inner div that is wide enough to handle the widest line of text and then a smaller outer one which acts at the holder for the inner 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>

참고URL : https://stackoverflow.com/questions/8956567/how-do-i-make-an-editable-div-look-like-a-text-field