ContextQMD
Back to Freecodecamp

Step 15

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

latest3.0 KB
Original Source

--description--

In the declaration for the input[type="checkbox"]:checked::after selector, set the display to block. Setting your display property as block makes the element a block-level element, meaning that it takes up the full width of its container and starts on a new line, allowing you to control its width, height, and spacing more easily.

Next, set text-align to center. This will center the inline content (like text, or inline elements) horizontally within the block. The block will still take up the full width of its container but everything inside it will be aligned to the center.

--hints--

You should add a display property to your combined type selector with a pseudo-class selector and pseudo-element selector of input[type="checkbox"]:checked::after.

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

You should have a display property with a value of block.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.display, "block");

You should add a text-align property to your combined type selector with a pseudo-class selector and pseudo-element selector of input[type="checkbox"]:checked::after.

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

You should have a text-align property with a value of center.

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('input[type="checkbox"]:checked::after')?.textAlign, "center");

--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;
  appearance: none;
  border: 2px solid #f1be32;
  border-radius: 4px;
  background-color: white;
  transition: all 0.3s;
  vertical-align: middle;
  margin-right: 15px;
}

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

input[type="checkbox"]:checked::after {
  content: "✓";
--fcc-editable-region--

--fcc-editable-region--
}