-
14. When the checkbox is checked, the background color of the checkbox should change to a color of your choosing.
-
Failed:15. When the checkbox is checked, the border color of the checkbox should change to a color of your choosing.
Hi.
Can you please post the url of the step you are stuck on.
Photos/screenshots of an error can be helpful, but it also helps to provide the complete code. Posting the code helps us help you better!
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
For future reference:
If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.
The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.
body {
width: 100%;
margin: auto;
padding: 0;
}
h1 {
text-align: center;
margin-top: 100px;
padding-right: 30px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
h3 {
text-align: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.feature-card-container {
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
position: relative;
justify-content: center;
flex-direction: row;
gap: 10px;
}
.feature-card {
position: relative;
display: block;
border: 1px solid black;
width: 200px;
height: 175px;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
}
.feature-card:hover {
background: linear-gradient(to right, rgb(201, 163, 163), rgb(255, 255, 0));
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
box-shadow: 2px 2px 3px 2px rgb(0, 0, 0);
}
input[type=checkbox] {
position: absolute;
top: 15px;
right: 15px;
width: 18px;
height: 18px;
cursor: pointer;
margin: 0;
appearance: none;
border: 1px solid black;
border-radius: 4px;
background-color: white;
transition: all 0.5s;
vertical-align: middle;
}
input[type=checkbox]:checked {
border: 1px solid rgb(255, 255, 255);
background-color: rgb(4, 87, 4);
border-radius: 40px;
}
input[type=checkbox]:checked::after {
content: "✓";
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-weight: bolder;
color: rgb(255, 255, 0);
background-color: rgb(4, 87, 4);
border-radius: 40px;
}
.emoji {
display: flex;
justify-content: center;
}
.emoji img {
width: 50%;
margin: auto;
}
Please post the URL of the challenge you are working on. Thank you.