i css svg,纯 CSS-SVG单选

css

@import url('https://fonts.googleapis.com/css?family=Roboto');

body,

html {

display: grid;

height: 100%;

width: 100%;

background-color: rgb(242, 242, 242);

font-family: 'Roboto', sans-serif;

color: rgba(0, 0, 16, 0.8);

font-weight: 700;

padding: 0;

margin: 0;

}

a:link,

a:visited,

a:hover,

a:active {

color: rgba(0, 0, 16, 0.8);

text-decoration: none;

}

a:hover,

a:active {

border-bottom: 0.1em solid rgba(0, 0, 16, 0.8);

color: rgba(0, 0, 16, 0.8);

text-decoration: none;

}

span {

color: rgba(0, 0, 16, 0.4);

font-size: 70%;

}

header {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

margin: auto;

width: 34.6rem;

}

header h1 {

font-size: 2.8em;

}

.card {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

margin: auto;

-webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);

box-shadow: 0 0.5rem 1rem rgba(0, 0, 16, 0.19), 0 0.3rem 0.3rem rgba(0, 0, 16, 0.23);

background-color: rgb(255, 255, 255);

padding: 0.8rem;

width: 33rem;

}

.rating-container {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

padding: 0.4rem 0.8rem;

width: 100%;

}

.rating-text p {

color: rgba(0, 0, 16, 0.8);

font-size: 1.3rem;

padding: 0.3rem;

}

.rating {

background-color: rgba(0, 0, 16, 0.8);

padding: 0.4rem 0.4rem 0.1rem 0.4rem;

border-radius: 2.2rem;

}

svg {

fill: rgb(242, 242, 242);

height: 3.6rem;

width: 3.6rem;

margin: 0.2rem;

}

.rating-form-2 svg {

height: 3rem;

width: 3rem;

margin: 0.5rem;

}

#radios label {

position: relative;

}

input[type="radio"] {

position: absolute;

opacity: 0;

}

input[type="radio"] + svg {

-webkit-transition: all 0.2s;

transition: all 0.2s;

}

input + svg {

cursor: pointer;

}

input[class="super-happy"]:hover + svg,

input[class="super-happy"]:checked + svg,

input[class="super-happy"]:focus + svg {

fill: rgb(0, 109, 217);

}

input[class="happy"]:hover + svg,

input[class="happy"]:checked + svg,

input[class="happy"]:focus + svg {

fill: rgb(0, 204, 79);

}

input[class="neutral"]:hover + svg,

input[class="neutral"]:checked + svg,

input[class="neutral"]:focus + svg {

fill: rgb(232, 214, 0);

}

input[class="sad"]:hover + svg,

input[class="sad"]:checked + svg,

input[class="sad"]:focus + svg {

fill: rgb(229, 132, 0);

}

input[class="super-sad"]:hover + svg,

input[class="super-sad"]:checked + svg,

input[class="super-sad"]:focus + svg {

fill: rgb(239, 42, 16);

}

footer {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: end;

-ms-flex-pack: end;

justify-content: flex-end;

text-align: right;

width: 34.6rem;

margin: auto;

}

footer p {

font-size: 1.3em;

}

@media screen and (max-width: 650px) and (max-height: 700px) {

body,

html {

font-size: 0.7rem;

}

header h1 {

font-size: 4em;

}

footer p {

font-size: 2em;

}

}

@media screen and (max-height: 700px) {

body,

html {

font-size: 0.7rem;

}

header h1 {

font-size: 4em;

}

footer p {

font-size: 2em;

}

}

@media screen and (max-width: 650px) {

body,

html {

font-size: 0.7rem;

}

header h1 {

font-size: 4em;

}

footer p {

font-size: 2em;

}

}

@media screen and (max-width: 450px) and (max-height: 550px) {

body,

html {

font-size: 0.6rem;

}

header h1 {

font-size: 4.6em;

}

footer p {

font-size: 3em;

}

}

@media screen and (max-height: 550px) {

body,

html {

font-size: 0.6rem;

}

header h1 {

font-size: 4.6em;

}

footer p {

font-size: 3em;

}

}

@media screen and (max-width: 450px) {

body,

html {

font-size: 0.6rem;

}

header h1 {

font-size: 4.6em;

}

footer p {

font-size: 3em;

}

}

@media screen and (max-width: 400px) and (max-height: 500px) {

body,

html {

height: 500px;

width: 400px;

}

}

@media screen and (max-height: 500px) {

body,

html {

height: 500px;

}

}

@media screen and (max-width: 400px) {

body,

html {

width: 400px;

}

}