<textarea> mit horizontal rule

Kennt jemand eine Möglichkeit zur Erstellung von horizontalen Regeln innerhalb einer <textarea> ohne über einen hintergrund-Bild?

CSS3 wäre in Ordnung. Ich kann bodge ein Bild fallback für den IE, falls erforderlich.

Beispiel:

<textarea> mit horizontal rule

InformationsquelleAutor Turnip | 2012-02-27
  1. 53

    Können Sie dies mit linearen Farbverläufen:

    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

    • Und wir haben einen Gewinner! Dank minitech. Dass noch nie in den Sinn gekommen.
    • Sehr schön gemacht.
    • Auch, bearbeitet werden, um die Polsterung von deinem Bild. Puh! Das ist eine Menge von Farbverläufen...
    • Ich bin beeindruckt! Vielen Dank für die Zeit nehmen, es herauszufinden. Sehr geschätzt wird.
    • Gute Lösung. Es tut Einbußen erleiden, wenn Sie viele Zeilen, und Sie erhalten die Notwendigkeit zum scrollen (im FF zumindest). Nicht sicher, wie lösbar das ist schön...
    • Ja, ich habe bemerkt, dass Firefox hat Probleme mit der rendering-Gradienten, wie, vielleicht -moz-repeating-gradient besser funktionieren würde?
    • Gibt es eine Möglichkeit zu Steuern, die Höhe\position der Linien?
    • verändern Sie Ihre position, und um die Größe zu ändern, müsste man alle ändern, die 30px und 31px zu welcher Größe, die Sie wollte, und dass plus 1px.
    • Ist es möglich die "gestrichelten" Linien irgendwie obwohl?
    • Yep, wenn Sie eine Feste Hintergrundfarbe, können Sie ein anderes wiederholenden Verlauf, der begibt sich auf eine Ebene oberhalb der Zeilen von Links nach rechts und löscht die Leerzeichen zwischen den Bindestrichen: der hintergrund transparent transparenter hintergrund .... Lassen Sie mich wissen, wenn Sie brauchen mehr details.
    • auch, wie die vorhandenen linken und rechten Seiten zu arbeiten – die grauen Linien gehen über die gesamte Breite, dann gibt es zwei weiße Verläufe auf beiden Seiten, um Sie zu decken.)
    • Okay. Ich verstehe das Konzept, aber ich Kämpfe die ganze linear-gradient syntax, obwohl. Wäre Sie nicht durch Zufall in der Lage sein, um eine pen/Geige mit einem "gestrichelten" Lösung, oder?
    • href="https://jsfiddle.net/qn81mhu9/" >jsfiddle.net/qn81mhu9

    InformationsquelleAutor Ry-
  2. 0

    Ich denke, mit einem Bild ist die richtige Lösung.

    Fallback: transparente hintergrund der textarea -, hintergrund-Bild auf einem wrapper-DIV.

    InformationsquelleAutor Diodeus - James MacFarlane
Schreibe einen Kommentar