Comment faire en sorte qu'un DIV modifiable ressemble à un champ de texte ?

Question

J'ai un DIV qui a contentEditable=true pour que l'utilisateur puisse le modifier. Le problème est qu'il ne ressemble pas à un champ de texte et que l'utilisateur ne sait pas forcément qu'il peut être modifié.

Y a-t-il un moyen de donner un style à la DIV pour qu'il apparaisse à l'utilisateur comme un champ de saisie de texte ?

Answer 1

Ils sont identiques à leurs homologues réels dans Safari, Chrome et Firefox. Elles se dégradent gracieusement et ont un aspect correct dans Opera et IE9, également.

Démonstration : 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>

Sortie :

Answer 2

Dans WebKit, vous pouvez le faire : -webkit-appearance: textarea;

Answer 3

Vous pourriez opter pour une ombre de boîte intérieure :

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

J'ai mis à jour le jsfiddle de Jarish : http://jsfiddle.net/ZevvE/2/

Answer 4

Je suggère ceci pour correspondre au style de Chrome, étendu à partir de l'exemple de Jarish. Remarquez la propriété du curseur que les réponses précédentes ont omis.

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;

Answer 5

Vous pouvez placer un TEXTAREA de taille similaire sous votre DIV, de sorte que le cadre du contrôle standard soit visible autour du DIV.

Il est probablement préférable de le désactiver pour éviter de voler accidentellement la mise au point.