如何在css中为复选框的边框着色

我想给复选框的边框上色。我已经写了下面的css-

input[type=checkbox] {
            height: 15px;
            width: 15px;

            border: 1px solid #007dc6;
            -webkit-appearance: none;
        }

---

这只适用于chrome。我不想用css编写特定于浏览器的代码。css应适用于所有最新的浏览器。

通过隐藏默认复选框并使用

：before

元素和

：checked

，

not（：checked）

选择器设置我们自己的复选框的样式，可以操纵复选框的外观

例如：

正文{
字体系列：“SegoeUI”；
背景色：白色；
填充：10px；
}
.空间{
高度：10px；
}
.复选框*{
框大小：边框框；
位置：相对位置；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.复选框{
显示：内联块；
}
.复选框>输入{
显示：无；
}
.复选框>标签{
垂直对齐：顶部；
字号：18px；
左侧填充：30px；
}
.checkbox>[type=“checkbox”]+标签：在{
颜色：#777；
内容：''；
位置：绝对位置；
左：0px；
显示：内联块；
最小高度：20px；
高度：20px；
宽度：20px；
边框：2px实心#777；
字体大小：15px；
垂直对齐：顶部；
文本对齐：居中；
过渡：所有0.2秒缓进；
内容：''；
}
.checkbox.radio-square>[type=“checkbox”]+标签：在{
边界半径：0px；
}
.checkbox.radio-rounded>[type=“checkbox”]+标签：在{
边界半径：25%；
}
.checkbox.radio-blue>[type=“checkbox”]+标签：在{
边框：2个实心#ccc；
}
.checkbox>[type=“checkbox”]+标签：悬停：在{
边框颜色：浅绿色；
}
.checkbox>[type=“checkbox”]：选中+标签：之前{
宽度：8px；
高度：16px；
边框顶部：透明；
左边框：透明；
边框颜色：绿色；
边框宽度：4px；
变换：旋转（45度）；
顶部：-4px；
左：4px；
}

任务一
任务二

通过隐藏默认复选框并使用

：before

元素和

：checked

，

not（：checked）

选择器设置我们自己的复选框的样式，可以操纵复选框的外观

例如：

正文{
字体系列：“SegoeUI”；
背景色：白色；
填充：10px；
}
.空间{
高度：10px；
}
.复选框*{
框大小：边框框；
位置：相对位置；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.复选框{
显示：内联块；
}
.复选框>输入{
显示：无；
}
.复选框>标签{
垂直对齐：顶部；
字号：18px；
左侧填充：30px；
}
.checkbox>[type=“checkbox”]+标签：在{
颜色：#777；
内容：''；
位置：绝对位置；
左：0px；
显示：内联块；
最小高度：20px；
高度：20px；
宽度：20px；
边框：2px实心#777；
字体大小：15px；
垂直对齐：顶部；
文本对齐：居中；
过渡：所有0.2秒缓进；
内容：''；
}
.checkbox.radio-square>[type=“checkbox”]+标签：在{
边界半径：0px；
}
.checkbox.radio-rounded>[type=“checkbox”]+标签：在{
边界半径：25%；
}
.checkbox.radio-blue>[type=“checkbox”]+标签：在{
边框：2个实心#ccc；
}
.checkbox>[type=“checkbox”]+标签：悬停：在{
边框颜色：浅绿色；
}
.checkbox>[type=“checkbox”]：选中+标签：之前{
宽度：8px；
高度：16px；
边框顶部：透明；
左边框：透明；
边框颜色：绿色；
边框宽度：4px；
变换：旋转（45度）；
顶部：-4px；
左：4px；
}

任务一
任务二

复选框在所有浏览器中看起来都不一样……它们都有自己的实现。您最好使用下面答案中提到的替换方法进行完全控制和跨浏览器比较。复选框在所有浏览器中看起来都不一样……它们各自有自己的实现。您最好使用下面答案中提到的替换方法进行完全控制和跨浏览器比较。我的代码中的HTML是这样的，因此它没有标签作为同级输入[type=checkbox]。你能为我的html代码提供一个例子吗？没有标签的复选框，用户如何知道它的用途？我的代码中的HTML非常简单，因此它没有标签作为输入的同级[type=checkbox]。你能为我的html代码提供一个例子吗？没有标签的复选框，用户如何知道它的用途？