首页checkbox选中变色

checkbox选中变色

时间: 2024-04-07 16:26:59 浏览: 241

要修改复选框选中时的背景颜色，可以使用CSS样式来实现。根据提供的引用内容[^1]，可以看到以下代码片段： ```css input[type=checkbox]:checked::after { content: "✓"; color: #fff; font-size: 10px; line-height: 15px; background-color: #42BEAD; } ``` 在这个代码片段中，`background-color: #42BEAD;`指定了选中时的背景颜色为`#42BEAD`。你可以根据需要修改这个颜色值来改变复选框选中时的背景颜色。以下是一个示例，展示了如何使用CSS样式来修改复选框选中时的背景颜色： ```html <!DOCTYPE html> <html> <head> <style> input[type=checkbox] { width: 16px; height: 16px; margin-top: 2px; position: relative; } input[type=checkbox]::after { position: absolute; top: 0; color: #000; width: 16px; height: 16px; display: inline-block; visibility: visible; padding-left: 0px; text-align: center; content: ' '; border-radius: 3px; } input[type=checkbox]:checked::after { content: "✓"; color: #fff; font-size: 10px; line-height: 15px; background-color: #42BEAD; /* 修改为你想要的颜色 */ } </style> </head> <body> <label for="checkbox">选项</label> <input type="checkbox" id="checkbox"> </body> </html> ``` 你可以将上述代码保存为一个HTML文件，然后在浏览器中打开该文件，就可以看到复选框选中时的背景颜色已经改变了。

阅读全文