Design a Feature Selection Page - Design a Feature Selection Page

Programming HTML-CSS
1

Tell us what’s happening:

I can’t past the 13 test is When the checkboxes are selected, there should be a checkmark ✓ in the center of the checkbox.

since I don’t know how to do what they ask for. It’s confusing me and if we saw it we saw it too quickly.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label class="feature-card" for="feature-1">Feature 1
        <input type="checkbox" id="feature-1"
    </label>
    <label class="feature-card" for="fiture-2">Feature 2 <input type="checkbox" id="feature-2"></label>
</div>
</body>

</html>

/* file: styles.css */
input[type="checkbox"] {appearance: none;
border-width: 25px;
border-color: yellow;
border-style: solid;}

input[type="checkbox"]:checked {backgroung-color: blue;
border-color: grey;
content: "✓"}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

Github Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @christinewho2,

You have the entire internet at your fingertips. Look up “CSS add a checkmark to a checkbox using content” then let us know if you still have questions.

Happy coding!

3

I try that and could find an answer with content in it. none wanted to use that. I tried using content but it didn’t work. Because the only one I can find is way the more mordern way which isn’t accesible everywhere firefox being the case. Duckduckgo isn’t helping.

4

actually here’s my updated code, but I don’t how to center my content

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label class="feature-card" for="feature-1">Feature 1
        <input type="checkbox" id="feature-1"
    </label>
    <label class="feature-card" for="fiture-2">Feature 2 <input type="checkbox" id="feature-2"></label>
</div>
</body>

</html>

input[type="checkbox"] {appearance: none;
border-width: 25px;
border-color: yellow;
border-style: solid;
background-color: white;}

input[type="checkbox"]:checked {backgroung-color: blue;
border-color: grey;}

input[type="checkbox"]:checked + label::before {content: "✓";
background-colir: grey;
align-content: center;}

found how. :smiley: