Comment puis-je faire en sorte que les DIV modifiables ressemblent à des champs de texte ?

Création de DIV modifiables avec l'attrait des champs de texte

Lors de la conception d'interfaces utilisateur modifiables, il est crucial d'indiquer visuellement aux utilisateurs les éléments interactifs. Un DIV avec contentEditable activé fournit des fonctionnalités modifiables, mais son apparence peut ne pas être intuitive. Heureusement, les techniques CSS peuvent transformer les DIV pour imiter l'esthétique des champs de texte.

Une approche consiste à exploiter les apparences spécifiques au navigateur. Pour Safari, Chrome et Firefox :

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}

Ce CSS simule respectivement une zone de texte et un champ de saisie de texte.

Si vous préférez la compatibilité entre navigateurs, le style suivant peut obtenir un résultat similaire résultat :

#textarea {
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

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

Avec ces ajustements, vos DIV modifiables prendront l'apparence familière des champs de texte, rendant leur fonctionnalité plus convivial.

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!