Steps to optimize HTML5 forms with CSS3-CSS Tutorial-php.cn

Today I will show you how to use CSS3 to optimize HTML5 forms. First, we create a form with the following 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; }

Copy after login

The only thing to note is that the last two styles only take effect when the corresponding patch script is run. First, I want each fieldset to have a nice gradient background, with a little space between each other. The following is the modified CSS code for 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); }

Copy after login

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!