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

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>

<textarea>
Here is a
Multiline
Textarea
</textarea>


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

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!