ContextQMD
Back to Freecodecamp

Step 10

curriculum/challenges/english/blocks/workshop-game-settings-panel/68e9a6bf1a74721a4e43e217.md

latest2.3 KB
Original Source

--description--

Now you are going to remove the default checkbox that is applied by browsers. Inside of your input[type='checkbox'] selector, add appearance with a value of none.

Setting the appearance property to none will clear the appearance the browser applies to checkboxes, allowing you to show the style you want.

After doing so, since the checkbox won't be visible anymore, set a border with 2px thickness, a solid style, and a hex code of #f1be32.

--hints--

You should add an appearance property to your input[type="checkbox"] selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.appearance);

You should have an appearance property with a value of none.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.appearance, "none");

You should add a border property to your input[type="checkbox"] selector.

js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.border);

You should have a border property with a value of 2px solid #f1be32.

js
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]')?.border, "2px solid rgb(241, 190, 50)");

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Game Settings Panel</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="settings-card">
      <h1>Game Settings</h1>
      <label> <input type="checkbox" />Sound Effects</label>
      <label> <input type="checkbox" />Background Music</label>
      <label> <input type="checkbox" />Hard Mode</label>
      <label> <input type="checkbox" />Haptic feedback</label>
    </div>
  </body>
</html>
css
body {
  height: 100vh;
  background-color: #f0f0f0;
  text-align: center;
}

.settings-card {
  max-width: 250px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  margin: auto;
  text-align: left;
}

h1 {
  text-align: center;
}

label {
  display: block;
  cursor: pointer;
  margin: 8px auto;
}

input[type='checkbox'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
--fcc-editable-region--
  
--fcc-editable-region--
}