Heim  >  Artikel  >  Web-Frontend  >  Wie verwende ich CSS-Stile, um schöne Formularstile zu erstellen? (Codebeispiel)

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

藏色散人
藏色散人Original
2018-08-13 17:44:588984Durchsuche

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(&#39;bg_form.png&#39;) 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:

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

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!

Stellungnahme:
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