自定义 css radio 方块形状 字体在方块中间 未选择背景灰色字体黑色选中后背景变蓝字体变白

你可以使用 CSS 来自定义 `input` 标签的 `type` 属性为 `radio` 的样式，实现方块形状，字体在方块中间，未选择背景灰色，字体黑色；选中后背景变蓝，字体变白的效果。以下是一种实现方法：

/* radio 样式 */
input[type="radio"] {
  display: none; /* 隐藏默认的 radio */
}

/* 自定义 radio 样式 */
.custom-radio {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: 2px solid gray; /* 未选中时的边框颜色 */
  border-radius: 50%; /* 设置为圆形 */
  position: relative;
}

/* 自定义 radio 中的文字 */
.custom-radio::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: blue; /* 选中时的背景色 */
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0); /* 初始状态缩放为 0 */
  transition: all 0.2s ease-in-out; /* 动画过渡 */
}

.custom-radio label {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

/* 选中状态下的 radio 样式 */
input[type="radio"]:checked + .custom-radio::before {
  transform: scale(1); /* 缩放为 1，显示选中效果 */
}

/* 修改文字颜色 */
input[type="radio"] + .custom-radio label {
  color: black; /* 未选中时的文字颜色 */
}

input[type="radio"]:checked + .custom-radio label {
  color: white; /* 选中时的文字颜色 */
}

/* 修改背景颜色 */
input[type="radio"] + .custom-radio {
  background-color: #f7f7f7; /* 未选中时的背景色 */
}

input[type="radio"]:checked + .custom-radio {
  background-color: transparent; /* 选中时去掉背景色 */
}

在 HTML 中，你可以这样使用：

<label>
  <input type="radio" name="radio-group" value="option1">
  <span class="custom-radio"></span>
  Option 1
</label>

<label>
  <input type="radio" name="radio-group" value="option2">
  <span class="custom-radio"></span>
  Option 2
</label>

这段代码会生成两个 radio，每个 radio 对应一个 label。label 中的文字与 radio 使用了 flex 布局来实现水平排列。你也可以根据需要调整样式。