haciendo un div editable que se asemenda a un campo de texto

a menudo, puede ser deseable permitir a los usuarios editar secciones específicas de una página web utilizando divs editables. Sin embargo, los elementos DIV naturalmente carecen de las señales visuales que indican la edición, dejando a los usuarios inciertos sobre si pueden interactuar con ellos.

para abordar este problema, el estilo CSS se puede emplear para transformar un DIV editable en una apariencia de un campo de entrada de texto estándar. Afortunadamente, los navegadores modernos proporcionan propiedades CSS específicas que imitan la apariencia de los controles de entrada de texto nativos.

CSS Styling para una división Div

CSS que se puede aplicar a un Div para darle una apariencia de texto:

#Textarea { -Moz-apariencia: TextField-Multiline; -Webkit-apariencia: TextAREA; borde: 1px gris sólido; fuente: mediana -moz fijada; Font: -Webkit-Small-Control; Altura: 28px; desbordamiento: auto; relleno: 2px; cambiar el tamaño: ambos; Ancho: 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;
}

Además, se pueden aplicar estilos específicos al elemento TextAREA para el realismo agregado:

TextAREA { Altura: 28px; Ancho: 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;
}

CSS Styling para una entrada de texto en forma de texto

De manera similar, una entrada se puede diseñar para parecerse a un campo de texto usando el siguiente CSS:

#Entrada \ -Moz-Aparianza: TextField; -Webkit-apariencia: TextField; Color de fondo: blanco; Color de fondo: -Moz-Field; Border: 1px Solid Darkgray; Shadow de caja: 1PX 1PX 1PX 0 LIGHGRAY INSET; Font: -Moz -Field; Font: -Webkit-Small-Control; margen-top: 5px; relleno: 2px 3px; Ancho: 398px; }

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

aporte { margen-top: 5px; Ancho: 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;
}

output

el html y css resultante produce la siguiente salida:

[imagen de un textAREA y una entrada, ambas en las que se ve como campos de texto] para Opera e IE9.