如何把input复选框如何变成好看的圆形

本文主要是介绍如何把input复选框如何变成好看的圆形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在HTML和CSS中，默认的<input type="checkbox">元素通常呈现为一个小方块。要将复选框变为圆形，你需要使用CSS来自定义其样式。这通常涉及到隐藏默认的复选框并使用伪元素（如::before或::after）来创建一个新的圆形外观。

以下是一个基本的示例，展示了如何将复选框变为圆形：

HTML:

<label class="checkbox-custom">  <input type="checkbox" />  <span class="checkmark"></span>  复选框标签  
</label>

CSS：

.checkbox-custom {  position: relative;  display: inline-block;  padding-left: 30px;  cursor: pointer;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  
}  .checkbox-custom input {  position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0;  
}  .checkbox-custom .checkmark {  position: absolute;  top: 0;  left: 0;  height: 20px;  width: 20px;  background-color: #eee;  border-radius: 50%;  
}  .checkbox-custom input:checked ~ .checkmark {  background-color: #2196F3;  
}  .checkbox-custom .checkmark:after {  content: "";  position: absolute;  display: none;  
}  .checkbox-custom input:checked ~ .checkmark:after {  display: block;  
}  /* 这里是创建一个小的白色圆形来表示选中的复选框 */  
.checkbox-custom .checkmark:after {  top: 50%;  left: 50%;  width: 8px;  height: 8px;  border-radius: 50%;  background: white;  transform: translate(-50%, -50%);  
}

在这个示例中，.checkbox-custom类包装了复选框和相关的标签。复选框本身被设置为绝对定位，并且其opacity被设置为0，以便隐藏它。然后，我们使用.checkmark类来创建一个圆形的背景，并使用::after伪元素来在复选框被选中时显示一个小的白色圆形。

这篇关于如何把input复选框如何变成好看的圆形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---