Wie verwende ich CSS-Stile, um schöne Formularstile zu erstellen? (Codebeispiel)

In diesem Artikel wird hauptsächlich die exquisite Produktionscodemethode des CSS-Formularstils vorgestellt. Ein gut aussehender Formularstil ist entscheidend für die Gesamtwirkung der Website. Er ist nicht nur für Benutzer angenehm zu lesen, sondern eignet sich auch für die Verwaltung der Website durch Webmaster.

Die spezifischen Beispiele für exquisiten Formular-CSS-Stilcode sind wie folgt:

Formularcode:

<form class="form">  
  <p class="name">  
    <input type="text" name="name" id="name" />  
    <label for="name">Name<span>图</span><i>库</i></label>  
  </p>  
  <p class="email">  
    <input type="text" name="email" id="email" />  
    <label for="email">E-mail<span>图</span><i>库</i></label>  
  </p>  
  <p class="web">  
    <input type="text" name="web" id="web" />  
    <label for="web">Website<span>图</span><i>库</i></label>  
  </p>  
  <p class="text">  
    <textarea name="text"></textarea>  
  </p>  
  <p class="submit">  
    <input type="submit" value="Send" />  
  </p>  
</form>

CSS-Stilcode:

input, textarea {    
 padding: 9px;   
 border: solid 1px #E5E5E5;   
 outline: 0;   
 font: normal 13px/100% Verdana, Tahoma, sans-serif;   
 width: 200px;   
 background: #FFFFFF url('bg_form.png') left top repeat-x;   
 background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));   
 background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);   
 box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
 -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
 -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;   
 }   
  
textarea {    
 width: 400px;   
 max-width: 400px;   
 height: 150px;   
 line-height: 150%;   
 }   
  
input:hover, textarea:hover,   
input:focus, textarea:focus {    
 border-color: #C9C9C9;    
 -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;   
 }   
  
.form label {    
 margin-left: 10px;    
 color: #999999;    
 }   
  
.submit input {   
 width: auto;   
 padding: 9px 15px;   
 background: #617798;   
 border: 0;   
 font-size: 14px;   
 color: #FFFFFF;   
 -moz-border-radius: 5px;   
 -webkit-border-radius: 5px;   
 }

Der Effekt ist wie folgt:

Hinweis: Die Eigenschaft

box-shadow fügt der Box einen oder mehrere Schatten hinzu. Diese Eigenschaft ist eine durch Kommas getrennte Liste von Schatten, die jeweils durch 2–4 Längenwerte, einen optionalen Farbwert und das optionale Schlüsselwort „inset“ angegeben werden. Der Wert für die ausgelassene Länge ist 0. Verwenden Sie die border-image-*-Eigenschaften, um schöne skalierbare Schaltflächen zu erstellen!

Mögliche Werte:

h-shadow Erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt.

V-Shadow erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt.

unschärfe Optional. Unscharfe Distanz.

Spread Optional. Die Größe des Schattens.

Farbe optional. Die Farbe des Schattens.

Einsatz optional. Ändern Sie den äußeren Schatten (Anfang) in einen inneren Schatten.

Oben geht es darum, wie man CSS zum Entwerfen von Formularstilen verwendet. Ich hoffe, dass es für Freunde in Not hilfreich ist.

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS-Stile, um schöne Formularstile zu erstellen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!