Wie kann man Kommentarfelder mit CSS stylen

Wenn Sie verschiedene Arten von Formularen erstellen, müssen Sie sie stylen, um einen attraktiveren Einfluss auf die Benutzer zu haben, die das Formular ausfüllen werden. Wir werden die folgenden Aspekte von Stylingformen besprechen:

  1. Wie kann man die Hintergrundfarbe des Kommentarfeldes ändern?
  2. Wie kann man ein Hintergrundbild zum Kommentarfeld hinzufügen?
  3. Wie kann man Grenzen zum Kommentarfeld hinzufügen?

Wie kann man die Hintergrundsfarbe der Kommentarfeld ändern?

Wenn Sie die Hintergrundfarbe Ihres Kommentarfeldes ändern möchten, definieren Sie zunächst class für das Element <textarea>, um ihm Stil zu verleihen, dann verwenden Sie die CSS-Eigenschaft background-color, um Ihre Wunschfarbe zu definieren. Stellen Sie auch die CSS-Eigenschaften width, height und paddingein, um ein gut strukturiertes Kommentarfeld zu haben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      background-color: #d0e2bc;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment">Geben Sie Ihren Kommentar hier ein.</textarea>
      <br>
      <input type="submit" name="submit" value="Senden">
    </form>
  </body>
</html>

Sie können auch die Textfarbe und -größe für Ihr Kommentarfeld ändern. Verwenden Sie dafür die CSS-Eigenschaften color und font.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      background-color: #d0e2bc;
      font: 1.4em/1.6em cursive;
      color: #095484;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment">Geben Sie Ihren Kommentar hier ein.</textarea>
      <br>
      <input type="submit" name="submit" value="Senden">
    </form>
  </body>
</html>
Ändern Sie die Farbe und Größe des Textes je nach dem Hintergrund.

Wie kann man ein Hintergrundbild zum Kommentarfeld hinzufügen?

Um ein Hintergrundbild Ihrem Kommentarfeld einzufügen, müssen Sie die CSS-Eigenschaft background-image, um das Element <textarea> zu stylen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      background-image: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      font:1.4em/1.6em cursive;
      color: #095484;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment"> Geben Sie Ihren Kommentar hier ein.</textarea>
      <br>
      <input type="submit" name="submit" value="Senden">
    </form>
  </body>
</html>
Sie können die Größe des Kommentarfeldes ganz einfach an die gewünschte Bildgröße anpassen. Zu diesem Zweck ändern Sie einfach die Werte der Eigenschaften width und height und stellen Sie sie so ein, dass sie gleich oder kleiner als die Bildgröße sind. Alternativ können Sie auch die Eigenschaft background-size verwenden, um die Größe des Hintergrundbildes zu definieren.

Wie kann man Grenzen zu Ihrem Kommentarfeld hinzufügen?

Um border zu Ihrem Kommentarfeld hinzuzufügen, müssen Sie nur die shorthand CSS-Eigenschaft border verwenden. Wählen Sie Ihren bevorzugten Rahmenstil hier.

Sie können auch die Eigenschaften border-width, border-style und border-color separat für Ihr Kommentarfeld definieren.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      border: 3px dashed #8ebf42;
      background-color: #d0e2bc;
      font:1.4em/1.6em cursive;
      color: #095484;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment">Geben Sie Ihren Kommentar hier ein.</textarea>
      <br>
      <input type="submit" name="submit" value="Senden">
    </form>
  </body>
</html>

Verwenden Sie die CSS-Eigenschaft border-left, wenn Sie nur einen linken Rand für Ihr Kommentarfeld haben möchten.

Verwenden Sie die Eigenschaften border-right, border-top, border-bottom entsprechend für eine bestimmte Randseite.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .comment {
      width: 40%;
      height: 100px;
      padding: 10px;
      border-left: 6px solid #095484;
      background-color: #d0e2bc;
      font:1.4em/1.6em cursive;
      color: #095484;
      }
    </style>
  </head>
  <body>
    <form>
      <textarea class="comment">Geben Sie Ihren Kommentar hier ein.</textarea>
      <br>
      <input type="submit" name="submit" value="Senden">
    </form>
  </body>
</html>