alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-28 01:39:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement star rating css

Browse Source
This commit is contained in:
Sanjit Joseph 2022-11-12 23:58:39 -08:00
parent f9a0a01fb4
commit 3dfb22d3b5
1 changed files with 44 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
static/CreatePage.css
View File

@ -80,6 +80,49 @@ background-color: rgb(254, 171, 171);
border-color: red; border-color: red;
} }
.hidden {
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none; display: none;
} }
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float:right;
/* Hide label text */
width:1em;
overflow:hidden;
white-space:nowrap;
font-size:200%;
line-height:1.2;
color:#b3b3cc;
}
.rating:not(:checked) > label:before {
content:'★';
}
/* Checked star color */
.rating > input:checked ~ label {
color: #FFBF00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label {
color: orangered;
}
.rating > label:active {
position:relative;
}