Étapes pour optimiser les formulaires HTML5 avec CSS3

Aujourd'hui, je vais vous montrer comment utiliser CSS3 pour optimiser les formulaires HTML5. Tout d'abord, nous créons un formulaire avec le format suivant.

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

La seule chose à noter est que les deux derniers styles ne fonctionnent que lorsque le script de patch correspondant est exécuté. Tout d'abord, je veux que chaque ensemble de champs ait un joli fond dégradé, avec un peu d'espace entre eux. Voici le code CSS modifié pour 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);
}

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site php chinois !

Lecture connexe :

Introduction détaillée à l'attribut translation en CSS3

Étapes pour implémenter l'effet de halo rotatif en CSS3

Étapes pour implémenter le code de fil d'Ariane de style circulaire CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!