Comment puis-je styliser un DIV ContentEditable pour qu'il ressemble à un champ de texte ?

Style des DIV modifiables en tant que champs de texte

Lors de la création d'un DIV avec un contenu modifiable à l'aide de contentEditable=true, les utilisateurs peuvent ne pas reconnaître immédiatement qu'il peut être modifié en raison de son apparence par défaut. Ce problème peut être résolu en stylisant le DIV pour qu'il ressemble à un champ de saisie de texte standard.

Pour obtenir cette similarité visuelle, vous pouvez exploiter les styles CSS suivants :

#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;
}

Ces styles fournissent une bordure , hauteur réglable par débordement et définition de la police appropriée pour un champ de texte.

De plus, vous pouvez inclure un style personnalisé dans la section de saisie {} pour améliorer davantage le type de champ de texte. design :

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;    
}

Ici, nous avons ajouté une marge pour empêcher l'entrée d'apparaître trop près des autres éléments, et avons personnalisé la couleur d'arrière-plan, la bordure et l'ombre pour obtenir une apparence cohérente.

En implémentant ces styles CSS, vous pouvez transformer un DIV modifiable en un champ de texte visuellement attrayant, indiquant clairement aux utilisateurs qu'ils peuvent modifier son contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!