我正面臨一個(gè)問(wèn)題，我試圖找出如何更新我的html復(fù)選框的方式，一旦它被選中，而不是勾選??內(nèi)，我把一個(gè)小尺寸的白色正方形小格，如附圖所示。當(dāng)我取消選中它時(shí)，它只是一個(gè)普通的黑色背景的白邊復(fù)選框。

我在這里做了一些努力

= & gthttps://jsbin.com/xejupuziqi/edit? html，css，輸出，

但不幸的是，運(yùn)氣不好。

如果你的唯一目標(biāo)是有一個(gè)白盒在里面，這應(yīng)該是可行的，通過(guò)使用邊框和輪廓

body {
  background-color: black;
}

input {
  appearance: none;
  height: 25px;
  width: 25px;
  background-color: black;
  outline: solid 2px white;
}

input:checked {
  border: solid 4px black;
  background-color: white;
}

<input type="checkbox">

#myCheckbox {
      display: none;
    }
    
    #myCheckboxLabel {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 1px solid #000;
      cursor: pointer;
    }
    
    #myCheckbox:checked + #myCheckboxLabel {
      background-color: #fff;
    }
    
    #myCheckbox:checked + #myCheckboxLabel:before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      background-color: #000;
      margin: 4px;
    }

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox" id="myCheckboxLabel"></label>

經(jīng)過(guò)一些研究，使用純html的“復(fù)選框”是不可能的，因?yàn)镃SS沒(méi)有給這個(gè)特定區(qū)域足夠的靈活性。 但是，如果您自己重新創(chuàng)建復(fù)選框功能，這肯定是可能的，我將嘗試在一個(gè)小的基礎(chǔ)上工作，看起來(lái)可能是這樣的:

<div class="checkbox"> <!-- Style this div to be a white square with a grey outline like the checkbox is normally -->
    <img class="check" src=" image source here ">
</div>

然后，如果您需要檢查div是否被選中，那么您可以只測(cè)試復(fù)選框是否有一個(gè)img源作為子元素。