<textarea> avec la règle horizontale

Personne ne sait de façon à créer des règles horizontales à l'intérieur d'un <textarea> sans l'aide d'une image d'arrière-plan?

CSS3 serait bien. Je peux bodge une image de secours pour IE si nécessaire.

Exemple:

<textarea> avec la règle horizontale

InformationsquelleAutor Turnip | 2012-02-27
  1. 53

    Vous pouvez faire cela en utilisant des dégradés linéaires:

    CSS:

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

    HTML:

    <textarea class="notes"></textarea>

    JSFiddle Version

    • Et nous avons un gagnant! Grâce minitech. Qui n'a même jamais traversé mon esprit.
    • Très joliment fait.
    • Aussi, édité pour ajouter le rembourrage de votre image. Ouf! C'est beaucoup de dégradés...
    • Je suis impressionné! Merci de prendre le temps de s'en sortir. Très apprécié.
    • La bonne solution. Il ne souffre légèrement lorsque vous avez plusieurs lignes et que vous obtenez le besoin de défilement (en FF au moins). Pas sûr de savoir comment solvable c'est bien...
    • Ouais, j'ai remarqué que Firefox a des problèmes de rendu des dégradés comme ça - peut-être -moz-repeating-gradient fonctionnerait mieux?
    • Est-il une option pour contrôler la hauteur\position des lignes?
    • va modifier leur position, et pour changer la taille, vous devrez modifier tous les 30px et 31px selon la taille que vous voulait et qu'en plus 1px.
    • Est-il possible d'obtenir des "pointillés" lignes en quelque sorte, si?
    • Eh oui, si vous avez un fixe la couleur de fond, vous pouvez mettre un autre en répétant dégradé qui va sur une couche au-dessus des lignes de gauche à droite et efface les espaces entre les tirets: arrière-plan transparent avec un fond transparent .... Laissez-moi savoir si vous avez besoin de plus de détails.
    • aussi comment l'existant côtés gauche et droit du travail – le gris des lignes sur toute la largeur, puis il y a deux blancs gradients de chaque côté pour les couvrir.)
    • Alright. Je comprends le concept, mais j'ai du mal avec l'ensemble de la linear-gradient de syntaxe si. Vous n'auriez pas, par hasard, être en mesure de fournir un stylo à jouer avec un "pointillés" solution, le feriez-vous?
    • href="https://jsfiddle.net/qn81mhu9/" >jsfiddle.net/qn81mhu9

    InformationsquelleAutor Ry-
  2. 0

    Je pense que l'utilisation d'une image est la bonne solution.

    De secours: arrière-plan transparent sur le textarea, background-image sur un wrapper DIV.

    InformationsquelleAutor Diodeus - James MacFarlane