Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Mit der neuen CSS-Eigenschaft Feldgröße können Eingabe, Textbereich und Auswahl an ihren Inhalt angepasst werden

Patricia Arquette
Freigeben: 2024-09-21 06:31:41
Original
976 Leute haben es durchsucht

CSS 新属性Field-sizing,可以使input 、 textarea和select自适应其内容

Einführung der Felddimensionierung

field-sizing ist eine neue CSS-Eigenschaft, die es Eingaben, Textbereichen und Auswahlen ermöglicht, automatisch an die Größe ihres Inhalts zu skalieren.

  • „fixed“ ist das aktuelle Verhalten von Eingaben, Textbereichen und Auswahlen, wobei diese unabhängig vom Inhalt eine feste Größe haben.
  • content bewirkt, dass das Formularelement auf die Größe des Inhalts
  • skaliert wird

Wenn Sie es auf eine Eingabe anwenden oder auswählen, wird es auf die Breite des Inhalts skaliert. Wenn Sie es auf einen Textbereich anwenden, wird es auf die Höhe des Inhalts skaliert.

Beispiel

<input
  type="text"
  placeholder="input"
  value="this sizes to its content"
/>

<style>input {
  field-sizing: content;
}
</style>
Nach dem Login kopieren
<textarea>
Here is a
Multiline
Textarea
</textarea>


<style>
 textarea {
  field-sizing: content;
  width: 200px;
}
</style>
Nach dem Login kopieren

Dinge zu beachten

  • Es ist Teil des CSS Basic User Interface Module Level 4, befindet sich noch im Editor-Entwurfsstatus (was bedeutet, dass sich Dinge ändern können und werden) und ist derzeit eine Chromium-exklusive Funktion. Ich erwarte jedoch, dass es irgendwann in diesem Jahr auch für andere Browser verfügbar sein wird, und Safari hat bereits positive Signale gesendet, und Firefox wird wahrscheinlich diesem Beispiel folgen.
  • Neben der fehlenden Browserunterstützung müssen Sie auch sicherstellen, dass Ihr Eingabe-, Auswahl- oder Textbereich einige Grenzen hat. Wenn Sie dies nicht tun, wird es einfach weiter wachsen. Sie können dies tun, indem Sie max-width oder max-height für das Element
  • festlegen
  • Fügen Sie Ihrer Eingabe und Auswahl ebenfalls die Mindestbreite hinzu, wenn Sie nicht möchten, dass sie auf die Breite von Leerzeichen oder Punkten verkleinert wird.

Das obige ist der detaillierte Inhalt vonMit der neuen CSS-Eigenschaft Feldgröße können Eingabe, Textbereich und Auswahl an ihren Inhalt angepasst werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!