首先隱藏默認(rèn)復(fù)選框，使用 opacity: 0 和 position: absolute 保持其功能但不可見(jiàn)；2. 創(chuàng)建自定義樣式，通過(guò)偽元素和 .checkmark 類設(shè)計(jì)復(fù)選框外觀；3. 利用 :checked + .checkmark 實(shí)現(xiàn)選中狀態(tài)的背景和邊框變化；4. 添加 :after 偽元素繪制對(duì)勾，并通過(guò) transform: rotate(45deg) 形成正確角度；5. 可選地添加懸停和聚焦?fàn)顟B(tài)提升交互性與可訪問(wèn)性；6. 最后可通過(guò)調(diào)整 border-radius 等屬性實(shí)現(xiàn)圓形（iOS風(fēng)格）復(fù)選框。整個(gè)過(guò)程僅用HTML和CSS即可完成，確?？稍L問(wèn)性和跨瀏覽器一致性，且無(wú)需JavaScript。

Creating a custom checkbox with CSS is a common way to improve the look and feel of your web forms. The default checkbox appearance varies across browsers and operating systems, so styling it with CSS gives you full control over its design. Here's how to do it step by step.

1. Hide the Default Checkbox

The first step is to hide the browser’s default checkbox while keeping it functional for accessibility and form submission. You can do this using the appearance property or by positioning it off-screen.

<label class="custom-checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
  Click me
</label>

.custom-checkbox {
  position: relative;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

This hides the actual <input> but keeps it clickable through the label.

2. Create a Custom Checkmark Design

Now, create a custom visual checkbox using the .checkmark span. You can style it as a square, rounded, or even animated.

.checkmark {
  height: 20px;
  width: 20px;
  border: 2px solid #999;
  border-radius: 4px;
  margin-right: 8px;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
}

3. Add the Checked State

Use the :checked pseudo-class combined with the sibling selector (+ or ~) to style the checkmark when the input is checked.

.custom-checkbox input:checked + .checkmark {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

/* Create the checkmark (tick) */
.custom-checkbox input:checked + .checkmark:after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

The :after pseudo-element draws the checkmark using CSS borders to form a tick.

4. Add Hover and Focus States (Optional but Recommended)

Make the checkbox more interactive and accessible.

.custom-checkbox:hover input ~ .checkmark {
  border-color: #555;
}

.custom-checkbox input:focus ~ .checkmark {
  outline: 2px solid #0077ff;
  outline-offset: 2px;
}

? Note: Using ~ (general sibling selector) instead of + allows you to style the .checkmark even if other elements are in between (though in this case, + works fine).

Final Notes

• Accessibility: Keep the <input> visible to screen readers by not using display: none or visibility: hidden. The method above (using opacity: 0) preserves accessibility.
• Labels: Always wrap or associate the input with a <label> so clicking the text toggles the checkbox.
• Customization: You can change colors, sizes, animations, or use SVG backgrounds for more complex designs.

Bonus: Rounded (iOS-style) Checkbox

Replace the .checkmark styles with:

.checkmark {
  border-radius: 50%;
}

.custom-checkbox input:checked + .checkmark:after {
  left: 7px;
  top: 3px;
  width: 4px;
  height: 8px;
}

And adjust the checkmark position accordingly.

That’s it. With just HTML and CSS, you’ve created a fully functional, accessible, and visually appealing custom checkbox. No JavaScript needed.

以上がCSSを使用してカスタムチェックボックスを作成する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。