Schritte zur Optimierung von HTML5-Formularen mit CSS3

Heute zeige ich Ihnen, wie Sie CSS3 zur Optimierung von HTML5-Formularen verwenden. Zuerst erstellen wir ein Formular mit dem folgenden Format.

#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 /* 36px ÷ 16 */ '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;
}

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:

#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);
}

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!