已经使用html中<input type="radio" name="rule1"<label for="rule1"></label>，我想把勾选处的圆形改为正方形并设置圆角，且勾选状态的背景为rgb(102,102,102)，勾为白色。再次点击时恢复未勾选的状态如何实现

你可以使用CSS来实现这个效果。首先，你需要使用一个自定义的样式来替换默认的圆形勾选框。你可以使用一个带有圆角的正方形来替代。然后，你需要为选中和未选中的状态设置不同的CSS样式。最后，你可以使用JavaScript来根据用户的点击事件来切换选中状态。

以下是一个示例代码，可以供你参考：

HTML代码：

<label>
  <input type="checkbox" name="rule1" class="checkbox">
  <span class="checkbox-custom"></span>
  <span class="label-text">规则1</span>
</label>

CSS代码：

.checkbox-custom {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 4px;
  border: 2px solid #ccc;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
}

.checkbox:checked + .checkbox-custom {
  background: rgb(102,102,102);
  border-color: rgb(102,102,102);
}

.checkbox-custom:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.checkbox:checked + .checkbox-custom:before {
  transform: translate(-50%, -50%) scale(1);
  background: #fff;
}

JavaScript代码：

var checkbox = document.querySelector('.checkbox');

checkbox.addEventListener('change', function() {
  if (checkbox.checked) {
    checkbox.checked = false;
  } else {
    checkbox.checked = true;
  }
});

这个代码会将圆形勾选框替换为一个带有圆角的正方形，选中状态下的背景颜色为rgb(102,102,102)，勾为白色。当用户点击选框时，JavaScript代码将切换选中状态。