使用纯css3在圆圈(图标)内勾选/勾选
使用纯CSS3在圆圈内勾选/勾选可以通过伪元素和CSS属性来实现。以下是一个完善且全面的答案：
在HTML中，可以使用一个<input>元素来表示勾选框，并使用一个<label>元素来包裹该<input>元素，以便于点击整个区域来触发勾选操作。例如：
<label class="checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>接下来，使用CSS来美化勾选框。首先，隐藏原生的勾选框，然后使用伪元素来创建一个圆圈，并在选中时显示一个勾号。例如：
.checkbox input {
display: none;
}
.checkbox .checkmark {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 50%;
}
.checkbox .checkmark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #ccc;
opacity: 0;
}
.checkbox input:checked + .checkmark::after {
opacity: 1;
}上述代码中，.checkbox类用于包裹勾选框，.checkmark类用于创建圆圈，.checkmark::after伪元素用于创建勾号。通过input:checked选择器，可以在选中时改变勾号的透明度，从而实现勾选效果。
这种方法可以应用于各种场景，例如表单中的勾选框、任务列表中的勾选项等。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我已经搜索了很长一段时间了，似乎找不到一种方法来将复选框的未选中状态样式化。我可以将背景更改为红色，但我也需要添加一个十字，在css中可以吗？
这是我的代码，谢谢你的帮助
/* The customcheck */
.customcheck {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-s
浏览 4提问于2020-02-06得票数 0
回答已采纳
3回答
我在一个电子商务系统的前端工作，其中有一个卡片视图。我必须以不同的颜色显示水平自定义样式的单选按钮
我在卡片中放置了单选按钮，也进行了自定义，但问题是，当应用自定义样式时，它不能水平工作。
HTML
<div class="card-body ">
<span style="color: #B4B4B4"><h5><b>Color</b></h5></span>
<form>
<label
浏览 0提问于2019-09-09得票数 2
祝大家愉快。我有一个小问题，我希望我的复选框的课程偏好是在中间，而不是向右，在相同的位置，其他文本框在底部。我想让它成为页面的中心。就像在学术字母D之后的某个地方。无论我尝试什么，复选框都被限制在右侧。我试着让它浮起来，但它不起作用。
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px
浏览 0提问于2019-03-16得票数 0
回答已采纳
6回答
你好，我不擅长CSS，而且我很难将复选框标签放在复选框本身的顶部。你能帮帮我吗？我希望标签也是中间格式的文本，因为我也希望使用jquery动态地更改文本。如果我选中它，"Fix“文本将变成”固定的“，并且这个文本应该保持它在复选框顶部的中心位置。这是我的>>> 。
**注:请不要修改"html“部分，只修改"css”部分。
谢谢。
input[type="checkbox"]:not(:checked),
input[type="checkbox"]:checked {
position: absolute;
浏览 4提问于2016-11-24得票数 5
回答已采纳
4回答
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default che
浏览 23提问于2019-10-04得票数 0
回答已采纳
1回答
我能够实现自定义复选框，但我被困在显示默认灰色背景和动态蓝线。
在第一个例子中，只有一个点，从开始到点都要显示蓝线。在第二条线中，它们之间将出现蓝线。
如果有任何想法和帮助我将不胜感激。谢谢。
.wrapper {
width: 236px;
}
.container {
display: inline-block;
position: relative;
margin-left: 12px;
margin-right: 12px;
cursor: pointer;
padding: 10px;
font-size: 22px;
-webkit-us
浏览 1提问于2018-04-16得票数 0
回答已采纳
2回答
我正在尝试创建一个复选框标签，其中该复选框本身是隐藏的，但该标签不会因此在该标签上单击，选中该复选框，即使没有显示。
我想要发生的是，当它被选中时，标签保持红色，为此我为checkbox active分配了一个类，但它不起作用。它在悬停模式下工作得很好，但在活动模式下就不行了。当我单击它时，复选框会选中，但标签不会显示活动的类。
有什么想法吗？
我使用以下html：
<div class="gl_delete">
<div class="deleteCB">
<input id="uImgId47&#
浏览 0提问于2013-05-15得票数 1
回答已采纳
我有一个已自定义创建的复选框(不是标准浏览器复选框)。
我需要标签文本在一行上，但是因为CSS中的宽度设置为28 go (因为这是圆形复选框的大小)，所以它会使文本超过一行。
因此，我很难使圆圈保持相同的大小，而文本就在它旁边的一行上。当我将宽度设置为100%时，它明显地破坏了圆圈。请看下面的JSFiddle。
HTML：
Subscribe to this site
CSS：
.wpcf7-list-item input[type=checkbox] {
visibility: hidden;
}
.wpcf7-list-item
浏览 0提问于2016-08-17得票数 3
回答已采纳
1回答
我的问题是，它们相互重叠--：
我需要这样做：
我能做什么?我只需要用我的输入复选框排列文本，就像我在图片中显示的那样，有什么建议吗？
.round {
position: relative;
margin-left: 50px;
}
.round label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
浏览 1提问于2021-12-20得票数 0
回答已采纳
1回答
我使用自定义单选按钮的css代码。如果我使用html代码，一切都没问题。但是我正在尝试使用asp:RadioButton，它在标签中再呈现一个标记。所以css代码不是那样工作的。知道怎么修吗？
自定义RadioButton HTML代码(工作良好)：
<label class="container">
<input type="radio">
<span class="checkmark"></span>
</label>
RadioButton ASP.NET在span标记
浏览 0提问于2019-08-10得票数 0
1回答
我使用以下命令创建了自定义复选框/单选按钮： <label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span cla
浏览 33提问于2019-10-05得票数 0
回答已采纳
我一直在尝试制作进度条来显示表单填写进度。我想过用checkbox来控制进度条，它看起来很吸引人，而且我猜也很简单。但是我仍然坚持通过JavaScript来控制复选框。 let bar;
bar = document.createElement('div');
bar.id = "bar"
bar.style.height = 10 + 'px';
bar.style.width = 100 + '%';
//bar.style.backgroundColor = 'green';
bar.style.bo
浏览 5提问于2020-04-04得票数 1
上图显示标签内的复选框。在这里，当我单击复选框以外的空空间时，复选框将被选中。但是，如果我使用div元素而不是标签并单击空空间，则复选框将保持不变。在这个场景中标签和div有什么区别！
HTML代码：
<div class="card">
<h1>Fancy Checkbox</h1>
<label class="fancy-checkbox">
<input type="checkbox">
<i></i>
</label
浏览 2提问于2018-08-08得票数 0
回答已采纳
我想呈现一个任务列表。每个任务都应该有一个复选框。我使用css设计了复选框。但现在，当我单击任何复选框时，只会触发第一个列表项复选框。 Todo组件 const Todo = ({ todo, toggleTodo }) => {
return (
<li className='listItem' key={todo.id}>
<div className='round'>
<input
type='checkbox'
id=&#
浏览 8提问于2020-09-02得票数 0
5回答
在这些input和label元素上执行一些定制的css来设置复选框的样式。当用户单击复选框时，我正在尝试bold font-weight，如果用户再次单击以切换复选框，则切换regular。双关语对此犹豫不决。
$(function() {
var action = 1;
$('.control--checkbox input').on("click", goBold);
function goBold() {
if (action == 1) {
fontWeight("bold");
act
浏览 0提问于2018-03-24得票数 0
回答已采纳
2回答
我正在尝试做一个表格来添加一个博客页面。
我有标题形式，日期形式，内容形式，复选框的博客类别形式和图像形式的主题形象。
当我试图填充表单时，只有4个复选框中的3个有效，当我单击upload图像时，它将不会显示文件选择器。
这是截图：
这就是我想要达到的目标：
我试过浏览解决方案，但我的英语不是很好的浏览，我不知道关键字搜索解决方案。
请帮帮忙，我已经坚持了三个小时了。
下面是完整的代码：
let blogs = []
function addBlog(event) {
event.preventDefault()
let inputName = document.get
浏览 8提问于2022-05-14得票数 1
回答已采纳
3回答
从这个例子来看：
<input type="checkbox" name="jour_semaine[]" id="lundi" value="Lundi"/>
<label class="checkbox-inline weekday" for="lundi" >L</label>
<input type="checkbox" name="jour_semaine[]" id="mardi" value=
浏览 2提问于2016-01-05得票数 0
回答已采纳
1回答
我有下面的简单表单(这里是：)。当你点击复选框时，它会起作用，但我希望当你将焦点放在它上面(在文本字段的"tab“之后)并按空格键时，它也会被标记。然而，它似乎不起作用。有什么想法吗？
index.html
.labelCheckbox {
display: contents;
}
.checkbox label {
float: left;
padding-left: 0px !important;
font-size: initial;
}
input[type=
浏览 38提问于2018-06-07得票数 3
回答已采纳
1回答
我有一个复选框代码，我想把标签从右移到左边，同时维护它的设计
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's
浏览 1提问于2020-04-21得票数 0
回答已采纳
1回答
我在表的每一行中都有复选框，我的问题是，如果我使用引导复选框成功的话，我不会得到每个表的id。但是，如果我使用的是普通复选框，我将成功地获得每一行的正确Id。我的javascript有什么问题？有人能帮我吗？提前谢谢。
*复选框-成功
<div class="checkbox checkbox-success pull-right" style="display:none !important;">
<input type="checkbox" name=&
浏览 1提问于2018-12-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
