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

Faire en sorte qu'un DIV modifiable ressemble à un champ de texte

Souvent, il peut être souhaitable de permettre aux utilisateurs de modifier des sections spécifiques d'une page Web en utilisant DIV modifiables. Cependant, les éléments DIV manquent naturellement des repères visuels indiquant qu'ils sont modifiables, ce qui laisse les utilisateurs incertains quant à savoir s'ils peuvent interagir avec eux.

Pour résoudre ce problème, le style CSS peut être utilisé pour transformer un DIV modifiable en un semblant de fichier DIV. champ de saisie de texte standard. Heureusement, les navigateurs modernes fournissent des propriétés CSS spécifiques qui imitent l'apparence des contrôles de saisie de texte natifs.

Style CSS pour un DIV de type champ de texte

Le code CSS suivant peut être appliqué à un DIV pour lui donner une apparence semblable à celle d'un champ de texte :

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

De plus, des styles spécifiques peuvent être appliqués à l'élément textarea pour ajouter réalisme :

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

Style CSS pour une entrée de type champ de texte

De même, une entrée peut être stylisée pour ressembler à un champ de texte en utilisant le CSS suivant :

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

input {
  margin-top: 5px;
  width: 400px;
}

Sortie

Le résultat HTML et CSS produisent le résultat suivant :

[Image d'une zone de texte et d'une entrée, toutes deux stylisées pour ressembler à des champs de texte]

Ce style est compatible avec Safari, Chrome et Firefox, dégradant gracieusement pour Opera et IE9.

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!