Hi. Any assessment would be appreciated. Thank you and have a nice day!
Advanced Form Styling 1
Advanced Form Styling 2
Advanced Form Styling 3
Hi. Any assessment would be appreciated. Thank you and have a nice day!
Advanced Form Styling 1
Advanced Form Styling 2
Advanced Form Styling 3
Hi there @harryghgim! you’ve got some really good answers here, well done!
A few points:
For assessment 1:
For assessment 2, you are so nearly there, but the center circle doesn’t quite line up correctly with the outer circle. It is better to use positioning to do this job — set the checkbox as position: relative
and the generated content as position: absolute
so you can move the latter relative to the edges of the former.
And size both with even number values, so you cna get them to line up centrally.
Something like this would work nicely:
input[type="radio"] {
border: 1px solid darkgrey;
border-radius: 50%;
width: 24px;
height: 24px;
position: relative;
}
input[type="radio"]::before {
position: absolute;
content: " ";
width: 16px;
height: 16px;
top: 3px;
left: 3px;
border-radius: 50%;
}
Assessment 3 looks really good, nice work!