2012-02-27 14 views
19

¿Alguien sabe de una manera de crear reglas horizontales dentro de un <textarea> sin usar una imagen de fondo?<textarea> con la regla horizontal

CSS3 estaría bien. Puedo burlar una imagen alternativa para IE si es necesario.

Ejemplo:

enter image description here

Respuesta

44

Usted puede hacer esto utilizando gradientes lineales:

.notes { 
 
    background-attachment: local; 
 
    background-image: 
 
     linear-gradient(to right, white 10px, transparent 10px), 
 
     linear-gradient(to left, white 10px, transparent 10px), 
 
     repeating-linear-gradient(white, white 30px, #ccc 30px, #ccc 31px, white 31px); 
 
    line-height: 31px; 
 
    padding: 8px 10px; 
 
}
<textarea class="notes"></textarea>

JSFiddle Version

+0

y tenemos un ganador! Gracias minitech. Eso nunca pasó de mi mente. – Turnip

+0

Muy bien hecho. – j08691

+0

@ 3rror404: también, editado para agregar el relleno de su imagen. ¡Uf! Eso es un montón de gradientes ... – Ryan

0

creo que el uso de una imagen es la solución correcta.

Retraso: fondo transparente en el área de texto, imagen de fondo en un envoltorio DIV.

Cuestiones relacionadas