html在线调查,HTML5 调查问卷表单

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Lato:400,700,900);

body {

font-family: Lato, Helvetica, Arial, sans-serif;

background: linear-gradient(#dfdbd7, #d7d3d3);

color: #545454;

margin: 0;

min-height: 100vh;

}

.form {

max-width: 520px;

background: #fff;

margin: 1em auto;

padding-bottom: 1em;

border-radius: 8px;

box-shadow: 0 2px 3px rgba(0, 0, 0, 0.07);

}

.form header {

border-bottom: 3px double #e9e9e9;

padding: 1em 0;

padding-bottom: 1em;

}

.form header h1 {

text-align: center;

font-size: 1.3em;

color: #5f7796;

font-weight: bolder;

}

.form header h2 {

text-align: center;

font-size: 1em;

color: #94a9c3;

font-weight: normal;

}

.form .button-submit {

font-weight: regular;

color: #fff;

font-size: 1em;

padding: 0.8em 2em;

border-radius: 50em;

border: none;

background: #5f7796;

margin: 1em auto 0.3em;

display: block;

transition: all 0.2s linear;

}

.form .button-submit:hover {

background: #374558;

}

.form ul {

list-style: none;

margin: 0;

padding: 0;

}

.form ul h3 {

font-weight: normal;

font-size: 1.2em;

}

.form ul .question {

padding: 0 1em 1.5em;

border-bottom: 1px solid #e9e9e9;

}

.form ul .question .choice span {

background: #70b48b;

color: #fff;

font-size: 0.8em;

padding: 0.5em 1.5em 0.5em 2em;

margin: 0 1.2em 0 0;

border-radius: 100px;

position: relative;

min-width: 50px;

text-align: center;

display: inline-block;

transition: all 0.2s linear;

box-shadow: 0 0 0 2px rgba(0, 0, 0, 0) inset, 0 0 0 2px rgba(0, 0, 0, 0);

}

.form ul .question .choice span:before {

content: '';

background: #fff;

position: absolute;

top: 9px;

left: 7px;

border-radius: 50%;

width: 10px;

height: 10px;

}

.form ul .question .choice span:after {

content: '';

position: absolute;

z-index: 2;

width: 6px;

height: 6px;

top: 11px;

left: 9px;

transform: scale(0);

border-radius: 50%;

transition: all 0.3s linear;

}

.form ul .question .choice span:hover,

.form ul .question .choice span:focus {

background: #417d59;

}

.form ul .question .choice input {

display: none;

}

.form ul .question .choice input:checked + span {

box-shadow: 0 0 0 2px #5f7796 inset, 0 0 0 2px rgba(0, 0, 0, 0.1);

}

.form ul .question .choice input:checked + span:after {

background: #5f7796;

transform: scale(1);

}