Heute zeige ich Ihnen, wie Sie CSS3 zur Optimierung von HTML5-Formularen verwenden. Zuerst erstellen wir ein Formular mit dem folgenden Format.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | #redemption {
width: 100%;
font-family: 'ColaborateThinRegular';
font-weight: 400;
}
#redemption hgroup {
argin-bottom: 20px;
}
#redemption div {
width: 100%;
margin-bottom: 15px;
float: left;
}
#redemption span#range {
float: left;
font-size: 3em;
width: 100%;
color: red;
clear: both; text-align: center;
}
#howYouRateThis,#yearOfCrime {
text-align: right;
}
#redemption legend {
font-style: italic;
color: #434242;
font-size: 0.8em;
margin-bottom: 20px;
float: left; width: 100%;
}
#redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
}
#redemption label {
width: 40%;
float: left;
}
#redemption input {
height: 20px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption textarea {
height: 60px;
font-size: 1em;
width: 40%;
float: right;
}
#redemption input#submit {
text-decoration: none;
height: 34px;
font: 1.25em 'BebasNeueRegular'; background-color: #b01c20;
border-radius: 8px;
color: white; float: right;
margin-bottom: 10px;
background: linear-gradient(top, rgb(241,92,96) 0%, rgb(17 100%);
margin-top: 10px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
.polyfill-important .input-range,.polyfill-important .step-c float: right;
}
.polyfill-important .step-controls {
margin-right: -20px!important;
}
|
Nach dem Login kopieren
Das Einzige, was zu beachten ist, ist, dass die letzten beiden Stile nur funktionieren, wenn das entsprechende Patch-Skript ausgeführt wird. Erstens möchte ich, dass jedes Feldset einen schönen Hintergrund mit Farbverlauf und etwas Abstand zwischen den Feldern hat. Das Folgende ist der modifizierte CSS-Code für Fieldset:
1 2 3 4 5 6 7 8 | #redemption fieldset {
border: 1px dotted #cccccc;
padding: 2%;
margin-bottom: 20px;
background: #ffffff; background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);
border-radius: 4px;
box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3);
}
|
Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Für weitere spannende Informationen achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!
Verwandte Lektüre:
Detaillierte Einführung in das Übersetzungsattribut in CSS3
Schritte zum Implementieren des rotierenden Halo-Effekts in CSS3
Schritte zum Implementieren von CSS3-Breadcrumb-Code im kreisförmigen Stil
Das obige ist der detaillierte Inhalt vonSchritte zur Optimierung von HTML5-Formularen mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!