CSS Styliser des zones de texte comme un cahier

Il est possible de styliser une zone de texte afin que chaque ligne soit soulignée par un pointillé (comme un bloc-notes ou un bloc-notes)?

Le nombre de lignes doit être fixé à permet, disons 10.

Voici probablement ce que vous recherchez:

ligne

  

CSS3 pur

  

le résultat vous pouvez voir ce lien: http://jsfiddle.net/Wolfsblvt/qc9rgm7r/

Si vous êtes toujours intéressé par ce sujet, vous pouvez consulter les exemples de zone Texte texte – créés avec css uniquement sur le blog de fivera. Ce qui est cool, c’est que vous pouvez jouer avec les exemples sur place.

Ces solutions ne supportent pas les textarea débordants. Donc, le défilement ne fait que faire défiler le texte et non l’arrière-plan. Pour prendre en charge le défilement, vous devez append « background-attachment: local; ”À la textarea css.

Scroll brise toutes les solutions, une solution complète pour cela devrait également faire défiler les lignes avec du texte. Ceci est difficile à réaliser en ajoutant une image de fond à une zone de texte.

J’ai pris l’ autre réponse et l’ai mise à niveau vers SCSS pour la rendre configurable. Vous pouvez maintenant facilement changer la taille et la couleur des trous et des règles et tout sera dimensionné en conséquence.

En outre, j’ai ajouté un autre exemple qui utilise un div éditable au lieu d’une zone de texte.

Exemple

jsfiddle

 // rule config $rule-height: 20px; // <-- primary parameter $font-size: min(max($rule-height - 9, 8pt), 13pt); $rule-mask-height: $rule-height - 1; $rule-padding-top: $rule-height + 2; $rule-padding-right: $rule-height; $rule-padding-left: $rule-height * 2; // colors $hole-fill-color: #f5f5f5; $hole-shadow: #CCCCCC; $paper-color: #FFFFFF; $line-color: #E7EFF8; 

Malheureusement, Stackoverflow ne supporte pas SCSS, donc je viens d'inclure un instantané d'une configuration fixe ici:

 @import url("https://fonts.googleapis.com/css?family=Reenie+Beanie"); html { height: 100%; } body { background-color: #f5f5f5; } .editable { color: #000000; border: 1px solid #EEEEEE; box-shadow: 1px 1px 0 #DDDDDD; display: inline-block; vertical-align: top; /*font-family: 'Marck Script', cursive;*/ font-family: 'Reenie Beanie', cursive; font-size: 24px; line-height: 20px; margin: 2% auto; padding: 22px 20px 3px 40px; resize: none; min-height: 200px; width: 300px; background-color: #FFFFFF; background-image: -moz-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); background-image: -webkit-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); -webkit-background-size: 100% 20px; background-size: 100% 20px; } 
  
Editable div: This is the first line.
See, how the text fits here, also if there is a linebreak at the end?
It works nicely.

Great.