Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

I did the entire task from scratch and everything works for me, but it shows me that starting from point 9, that there should be no styles in checkboxes, there is nothing in my code, although everything is there and everything works.
input[type=‘checkbox’] {
width: 20px;
height: 20px;
cursor: pointer;
appearance: none;
}
it says me Your checkboxes should be set to appearance: none. and all other questions besides content are wrond

Your code so far

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Selection Feature Page</title>
    <link href="styles.css" rel="stylesheet">
</head>

<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label for="storage" class="feature-card">
            <div class="information">
                <h2>Cloud Storage</h2>
                <p>100 Gigabyte secure storage</p>
            </div>
            <input id="storage" type="checkbox">
        </label>
        <label for="support" class="feature-card">
            <div class="information">
                <h2>Dedicated Support</h2>
                <p>24/7 customer help</p>
            </div>
            <input id="support" type="checkbox">
        </label> <label for="analytics" class="feature-card">
            <div class="information">
                <h2>Advanced Analytics</h2>
                <p>Insights & reports</p>
            </div>
            <input id="analytics" type="checkbox">
        </label>
        <label for="userThemes" class="feature-card">
            <div class="information">
                <h2>Custom User Themes</h2>
                <p>Personalized dashboard design</p>
            </div>
            <input id="userThemes" type="checkbox">
        </label>
        <label for="collab" class="feature-card">
            <div class="information">
                <h2>Multi-User Collab</h2>
                <p>Team access and sharing</p>
            </div>
            <input id="collab" type="checkbox">
        </label>
        <label for="access" class="feature-card">
            <div class="information">
                <h2>API Access</h2>
                <p>Integrate with your custom built tools</p>
            </div>
            <input id="access" type="checkbox">
        </label>
    </div>
</body>

</html>

/* file: styles.css */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-card-container {
  width: 80%;
  min-width: 300px;
  max-width: 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;  
}

.feature-card {
  display: flex;
  align-items: center;
  justify-content: center; 
  flex: 1 1 180px; 
  height: 100px;
  padding: 20px;
  border: 2px solid #C0C0C0;
  border-radius: 10px;
  position: relative;
}

.feature-card input[type="checkbox"] {
  position: absolute;
  top: 10px;
  right: 10px;
}

.feature-card:hover {
  cursor: pointer;
  border-color: #f1be32;
    box-shadow: 0 4px 12px rgba(255, 201, 53, 0.6);
}

input[type='checkbox'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  border: 2px solid #C0C0C0;
  border-radius: 5px;
  background-color: white;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center; 
}

input[type="checkbox"]:checked {
  background-color: #f1be32;
  border-color: #f1be32;;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  color: white;
  display: block;
  text-align: center;
}

h2 {
  font-size: 22px;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

Aren’t these selectors both selecting the same thing? Try moving the properties from the first into the second and removing the transition property (causes a timing issue with the tests).

1 Like