In Desktop-Safari, Chrome, Firefox und Opera-unter-Presto (nicht IE, nicht mobil) haben <textarea>s eine kleine Größenänderungs-Nugget in der unteren rechten Ecke. Textareas sind zum Schreiben da, also wenn Benutzer mehr Platz brauchen, um sich beim Schreiben wohler zu fühlen, können sie ihn haben. Das Klicken und Ziehen dieses Größenänderers verändert buchstäblich das Box-Modell dieser Textarea und schiebt bei Bedarf andere Dinge weg. Wir können diese kleine Fähigkeit nutzen, um einen Trick zu machen!
Fairerweise muss ich sagen, dass ich das nicht erfunden habe. Ich habe es vor ungefähr einem Jahr gesehen, aber ich kann mich beim besten Willen nicht erinnern, wo. Als ich Davids Walschs schnellen Beitrag über wie man es stylen kann sah, erinnerte mich das daran, also machte ich mich daran, die Idee nachzubilden.
Nehmen wir an, Sie legen diese <textarea> in ein grünes <div>.
Dann ziehen Sie diese <textarea> höher. Das <div> wird größer.
Nun sagen wir, wir haben das absolut positioniert
Wenn Sie nun den Textarea-Größenänderer nach unten ziehen, um ihn größer zu machen, wächst das Div tatsächlich nach oben.
Wenn wir dann die Textarea klein machen und den Größenänderer stylen, sieht er überhaupt nicht mehr wie eine Textarea aus (nur Webkit).
textarea {
width: 12px;
height: 12px;
}
textarea::-webkit-resizer {
background: yellow;
}
Ein kleines Stück hängt unten heraus. Ich bin mir nicht sicher, was es damit auf sich hat, aber Sie können es mit overflow: hidden; auf einem der Wrapper ausblenden.
Wir werden den Größenänderer weiter stylen (ich denke, wir können ihn jetzt „Tab“ nennen) indem wir
- ihn zentrieren –
.tab { text-align: center; } - die Innereien der Textarea ausblenden –
textarea { background: none; border: 0; } - sicherstellen, dass der Tab nur nach unten gezogen werden kann –
textarea { resize: vertical; } - die Höhe des neu freigelegten Bereichs begrenzen –
.tab, textarea { max-height: 100px; }</li>
Jetzt, wenn Sie den „Tab“ herunterziehen, wird nur mehr Grün freigelegt
Wenn wir nun tatsächlichen Inhalt in diesen grünen Bereich legen und ihn gerade weit genug nach unten positionieren, dass er standardmäßig verborgen ist, können wir an diesem kleinen Tab ziehen und den Inhalt freilegen. Ziemlich raffiniert.
Demo
Farben und dergleichen wurden geändert, um sie besser sichtbar zu machen.
Ich weiß nicht, ob das besonders nützlich ist. Ich weiß, dass es nicht sehr mobilfreundlich ist. Ich weiß, dass es nicht sehr cross-browser-cool ist. Was es ist, ist ein verifizierter kleiner CSS-Trick.
Das lässt einen IE hassen, nicht wahr?
Das ist ein wirklich toller Trick, ich liebe deine Arbeit Chris, mach weiter so!
Fairerweise muss ich sagen, dass du nicht der Erfinder der meisten Dinge bist, die du hier postest. Du wiederholst einfach die Erkenntnisse anderer. Fallbeispiel: Dein aktueller SVG-Artikel.
Ich bin froh, dass du dieses Mal den Mut hattest, jemand anderen zu erwähnen, auch wenn diese Person anonym war.
Hater werden haten.
Danke?
Ich nehme an, normalerweise bin ich irgendein Sukkubus-Artikeldieb? Wenn es hier auf der Seite unkreditiertes Material gibt, lassen Sie es mich bitte wissen.
Chris ist ein guter Kommunikator und betreibt eine tolle Seite. Siehst du ihn wirklich als eine Art Cyber-Verbrecher?
Sein Name ist Ron Weasly. Eine fiktive Figur aus Harry Potter, es sei denn, das ist wirklich Ihr Name, dann tut es mir leid für Sie, Kumpel. Sein Zauberkunst-Geschick hat ihn hier wohl im Stich gelassen. Klingt wie ein Troll, Chris. Selbst wenn er im Namen anderer Artikel schreiben würde, glaubst du wirklich, er würde sie direkt kopieren? Da gibt es diesen Begriff namens Paraphrasieren...
Im Gegensatz zu dem, was viele Blog-Nazis sagen mögen, ist Wiederaufbereiten nicht schlecht. Tatsächlich ist es *oft* sehr hilfreich.
Wie oft „googeln“ Sie, wenn Sie eine neue Fähigkeit oder Technik lernen müssen, und lesen dann Blogbeiträge zu diesem Thema? Wenn Sie mir ähnlich sind, ist das jedes Mal so. Und wie oft lesen Sie ein paar und brechen ab, weil das Tutorial entweder
1) Schlecht geschrieben ist
2) Vom Autor nicht vollständig verstanden wird
3) Oder die Präsentation des Artikels Ihnen einfach nicht zusagt.
Ziemlich oft in meinem Fall. Die Artikel hier sind fast immer einfach und klar. Sie sind vielleicht nicht immer perfekt oder sogar immer „richtig“, aber niemand ist das. So lernen wir.
Rupert Grint wird nicht glücklich mit dir sein, Ronald Weasley.
Ich glaube, das könnte der Troll aus Harry Potter und der Stein der Weisen sein. :P
Sieht so aus, als ob Sie im seltsamen Schwebezustand stecken bleiben, wenn Sie auf halbem Weg aufhören zu ziehen, aber trotzdem ein netter Trick!
Hallo Chris,
Schöner Trick!
Nur ein Tipp, Sie möchten vielleicht die Scrollbars in diesem Beispiel stylen.
Wenn Sie den roten Tab langsam nach unten ziehen, wird in Chrome eine kleine Scrollbar darüber angezeigt.
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb
{
opacity:0;
}
Nur zur Info, die Textgrößenänderungs-Funktion ist nicht in der neuesten Version von Firefox enthalten.
resize: both;
width: 200px;
overflow: auto;
Interessante Entdeckung. Bezüglich der Größenänderung: Textareas mit fester Breite für Safari, Chrome und FF wären großartig, sodass die Größenänderung nur die Höhe verändert.
Fragst du, ob du das tun kannst? Chris hat es in seiner Demo gemacht, also lese ich deine Aussage vielleicht falsch als Frage.
Nur für den Fall, dass Sie es wissen wollten – Sie können die Größenänderung der Breite auf zwei Arten verhindern – Sie können „resize:vertical;“ verwenden, wie Chris es in seiner Demo getan hat (was der richtige Weg ist) oder Sie können einfach eine max-width für die Textarea angeben.
Chris! Das ist wirklich ein schönes Tutorial. Danke!
Ein weiterer großartiger Artikel, wie üblich… Ich liebe es, wie viele zufällige Tricks es hier für tolle kleine visuelle Bits und Bobs gibt… Ich würde gerne eine Menge davon im ultimativen CSS-Trick-Site kombinieren! (So etwas wie eine riesige Verschmelzung der besten CSS-Tricks… obwohl vielleicht genau das diese Seite ist, aber wir bemerken all die Tricks nicht! Wie auch immer)
Um nicht auf einem toten Pferd herumzureiten, aber Chris, du bist zu nett… Jeder, der hier oder auf einer anderen Seite wie dieser auftaucht und sich über die Originalität eines Artikels ärgert, obwohl die Seite im Wesentlichen brillante KOSTENLOSE Hilfe und Ratschläge anbietet – ich schlage zwei Dinge vor: 1. Denken Sie über Ihre Perspektive auf Originalität nach, mit dem Gedanken, dass keine Idee original ist, wir recyceln alle etwas, das jemand anderes bereits getan hat (- ist das nicht 75% der Entwicklung sowieso?) … und 2. Dass Sie sich in der Welt umsehen, in der Sie leben, und STFU.
:)
Können wir den kleinen Größenänderungs-Nugget nicht loswerden?
Gefällt mir!
Sie können die Fußnote jetzt entfernen!
**Kann „CSS“ oder „Tricks“ enthalten oder nicht*
:-)
Sie brauchen nicht wirklich eine Textarea dafür. Die Eigenschaft 'resize' funktioniert bei jedem Block (wie einem Div) oder Inline-Block. Ich bin mir nicht sicher (habe es nicht überprüft), aber es könnte sogar halbwegs auf Tabellen und Tabellenzellen funktionieren (da sie Höhe und Breite haben können, aber keinen Overflow).
Süß, danke.
Hier ist, wo Sie es gesehen haben http://codepen.io/mmoustafa
Es ist der hervorgehobene Pen.
Ja! Danke Mohamed. Clevere Arbeit.