如何修改input[type="checkbox"]的边框颜色？

你当前的两段CSS代码完全重复，要修改.contests下复选框的边框颜色，只需调整border属性中的颜色值即可，具体方法如下：

1. 直接修改border属性 #

原代码里的border: 1px solid #fff;中，#fff是白色，将其替换为你需要的颜色值（如十六进制色值、RGB/RGBA、颜色名称等）。示例代码：

.contests input[type="checkbox"]{
   background: #fff;
   margin-right: 10px;
   border: 1px solid #ccc; /* 替换为目标颜色 */
   width: 1rem;
}

2. 拆分属性单独控制边框颜色 #

如果你需要单独调整边框颜色而不改变宽度和样式，可以把border拆分为三个独立属性：

.contests input[type="checkbox"]{
   background: #fff;
   margin-right: 10px;
   border-width: 1px;
   border-style: solid;
   border-color: #2196F3; /* 单独设置边框颜色 */
   width: 1rem;
}

3. 解决浏览器默认样式冲突 #

部分浏览器的默认复选框样式会覆盖自定义样式，此时可以添加appearance: none;禁用默认样式，再完全自定义：

.contests input[type="checkbox"]{
   appearance: none;
   background: #fff;
   margin-right: 10px;
   border: 1px solid #ff5722;
   width: 1rem;
   height: 1rem; /* 统一宽高保证样式一致 */
   border-radius: 2px; /* 可选：添加圆角效果 */
}

/* 可选：自定义选中状态样式 */
.contests input[type="checkbox"]:checked{
   background-color: #ff5722;
   border-color: #ff5722;
   /* 可通过伪元素添加勾选图标，示例：
   content: "✓";
   color: #fff;
   text-align: center;
   line-height: 1rem;
   */
}

内容的提问来源于stack exchange，提问作者Vijay Prajapati