Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

it is working but not being accepted 14 and 15 checkbox checked.

Your code so far

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

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

<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label for=option-one class="feature-card">Option 1<input type="checkbox" id="option-one" name="option-one" value="option-one"/></label>
          
        <label for="option-two" class="feature-card">Option 2<input type="checkbox" name="option-one" value="option-one"></label>
        
    </div>

</body>

</html>

/* file: styles.css */
body {
  height: 100vh;
  background-color:rgb(244, 236, 226);
  text-align: center;
}

feature-card-container{
  display:flex;
  max-width: 200px;
  padding: 20px;
  border-radius: 10px;
  margin: auto;
  }

h1 {
  text-align: center;
  color:navy
}

label {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  height:100px;
  width:300px;
  border:2px solid green;
  color:Gold;
  font-weight:bold;
  border-radius:5px;
  background-color:#f5f5f5;
  display: block;
  cursor: pointer;
  margin: 8px auto;
}
.feature-card:hover{
  background-color:blue;
  border:2px solid white;
  color:white;
}
.feature-card input[type="checkbox"]:hover{
  border:2px solid lightblue;
  background-color:white;
}
input[type='checkbox']{
  width: 20px;
  height: 20px;
  content:"✓";
  cursor: pointer;
  appearance: none;
  border: 3px solid gold;
  border-radius: 4px;
  background-color:#6a7a45;
  transition: all 0.3s;
  vertical-align: middle;
  margin-right: 15px;
}
input[type="checkbox"]:checked{ 
  background-color: #f1be32;
  border:3px solid red; 
   ;
  padding-bottom:30px;
  padding-left:1px;
  padding-right:10px;
}

 input[type="checkbox"]:checked::after {
  background-color:gold;
  border:3px solid #6a7a45;
  content: "✓";
  display: block;
  text-align: center;
  padding-top:5px;
  padding-right:10px;
  color:white;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36

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

where is the id for this one?

3

thanks, but i still need help with why program is not accepting my checkbox; even though it appears to work.

4

I may have not been clear, but I am trying to make you notice the issue.

which is the checkbox with the id of option-two? the one associated with this label?

5

yes i understand i have a lot more work to do on this and i am greatful that you caught my careless mistake. Right now i am trying to find out why my checkbox:checked is not working

6

try to not use the transition property

7

oh my goodness that worked. i thought i needed to transition ,but it obviously caused problems. thanks so much!!!

8

use it! (in general) just our tests are not able to deal with the property change being delayed