Html 如何创建带有矩形边框的复选框？

我曾尝试使用border属性，但无法获得正确的设计。请帮助设计一个像图中一样的表单

HTML

---

我想这就是您想要的，只需将CSS添加到

而不是包装器中

。性别{
显示器：flex；
宽度：100%；
}
.性别科{
宽度：33%；
边框：2px实心#D3；
颜色：#D3；
边界半径：5px；
填充物：5px；
利润率：10px；
}
.性别组：悬停{
宽度：33%；
边框：2倍纯色灰色；
颜色：黑色；
边界半径：5px；
填充物：5px；
利润率：10px；
}
输入{
颜色：蓝色；
}

性别
男性的
女的
其他

我想这就是您想要的，只需将CSS添加到

而不是包装器中

。性别{
显示器：flex；
宽度：100%；
}
.性别科{
宽度：33%；
边框：2px实心#D3；
颜色：#D3；
边界半径：5px；
填充物：5px；
利润率：10px；
}
.性别组：悬停{
宽度：33%；
边框：2倍纯色灰色；
颜色：黑色；
边界半径：5px；
填充物：5px；
利润率：10px；
}
输入{
颜色：蓝色；
}

性别
男性的
女的
其他

。性别{
字体系列：“Poppins”，无衬线；
显示器：flex；
宽度：100%；
}
div{
宽度：70%；
}
输入{
颜色：蓝色；
}
.收音机{
边框：2倍纯色灰色；
利润率：10px；
边界半径：5px；
填充物：5px；
右填充：0px！重要；
}

性别
男性的
女的
其他

。性别{
字体系列：“Poppins”，无衬线；
显示器：flex；
宽度：100%；
}
div{
宽度：70%；
}
输入{
颜色：蓝色；
}
.收音机{
边框：2倍纯色灰色；
利润率：10px；
边界半径：5px；
填充物：5px；
右填充：0px！重要；
}

性别
男性的
女的
其他

带有响应：-）

。性别{
显示器：flex；
宽度：100%；
}
输入{
颜色：蓝色；
}
.收音机{
边界半径：5px；
边框：2倍纯色灰色；
填充物：5px；
}
标签{
右边填充：10px；
}
#自定义单选按钮。单选包装{
显示：内联块；
}
#自定义单选按钮。单选包装器输入[name=“gender”]{
显示：无；
}
#自定义单选按钮。单选包装输入[name=“gender”]+标签{
颜色：#292321；
字体系列：Arial，无衬线；
字体大小：14px；
}
#自定义单选按钮
.无线电包装器
输入[name=“gender”]
+标签
>跨距外{
显示：内联块；
宽度：12px；
高度：12px；
保证金：-4px4p0；
边框：2个实心#中交；
垂直对齐：中间对齐；
光标：指针；
位置：相对位置；
-moz边界半径：50%；
边界半径：50%；
背景色：#F8；
}
#自定义单选按钮
.无线电包装器
输入[name=“gender”]
+标签
span.内部{
显示：块；
位置：绝对位置；
显示：无；
宽度：10px；
高度：10px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
垂直对齐：中间对齐；
光标：指针；
-moz边界半径：50%；
边界半径：50%；
背景颜色：灰色；
}
#自定义单选按钮
.无线电包装器
输入[name=“gender”]：选中
+标签
span.内部{
背景颜色：蓝色；
显示：块；
}

性别
男性的
女的
其他

带有响应：-）

。性别{
显示器：flex；
宽度：100%；
}
输入{
颜色：蓝色；
}
.收音机{
边界半径：5px；
边框：2倍纯色灰色；
填充物：5px；
}
标签{
右边填充：10px；
}
#自定义单选按钮。单选包装{
显示：内联块；
}
#自定义单选按钮。单选包装器输入[name=“gender”]{
显示：无；
}
#自定义单选按钮。单选包装输入[name=“gender”]+标签{
颜色：#292321；
字体系列：Arial，无衬线；
字体大小：14px；
}
#自定义单选按钮
.无线电包装器
输入[name=“gender”]
+标签
>跨距外{
显示：内联块；
宽度：12px；
高度：12px；
保证金：-4px4p0；
边框：2个实心#中交；
垂直对齐：中间对齐；
光标：指针；
位置：相对位置；
-moz边界半径：50%；
边界半径：50%；
背景色：#F8；
}
#自定义单选按钮
.无线电包装器
输入[name=“gender”]
+标签
span.内部{
显示：块；
位置：绝对位置；
显示：无；
宽度：10px；
高度：10px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
垂直对齐：中间对齐；
光标：指针；
-moz边界半径：50%；
边界半径：50%；
背景颜色：灰色；
}
#自定义单选按钮
.无线电包装器
输入[name=“gender”]：选中
+标签
span.内部{
背景颜色：蓝色；
显示：块；
}

性别
男性的
女的
其他

希望这对您有所帮助

.container\u收音机{
显示：块；
位置：相对位置；
左侧填充：50px；
边缘底部：12px；
光标：指针；
字体大小：22px；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
边框：2倍纯色灰色；
利润率：10px；
边界半径：5px；
颜色：#D3；
右侧填充：19px；
}
/*隐藏浏览器的默认单选按钮*/
.集装箱(u)无线电输入{
位置：绝对位置；
op
<div>
   <h3>Gender</h3>
        <div class="gender">
          <div>
            <input type="radio" name="gender" value="Male">
            <span>Male</span>
          </div>
          <div>
            <input type="radio" name="gender" value="Female">
            <span>Female</span>
          </div>
          <div>
            <input type="radio" name="gender" value="Others">
            <span>Others</span>
          </div>
        </div>
      </div>
    </div>

 .gender{
            display: flex;
            width: 100%;
            border: 2px solid grey;
            div{
            width: 33%;
            }
            input{
            color: blue;
         }