无任何js的样式勾选框，纯css

最新推荐文章于 2024-05-23 15:23:28 发布
最新推荐文章于 2024-05-23 15:23:28 发布
阅读量170 收藏 1
点赞数
原文链接：https://my.oschina.net/u/3010603/blog/796598
版权

<html>

<head>
    <meta charset="utf-8">
    <title>chec</title>

    <style>
        span {
            position: relative;
        }
        .input_check {
            position: absolute;
            visibility: hidden;
        }
        .input_check+label {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 1px solid #fd8845;
        }
        .input_check:checked+label:after {
            content: "";
            position: absolute;
            left: 2px;
            bottom: 12px;
            width: 9px;
            height: 4px;
            border: 2px solid #fd8845;
            border-top-color: transparent;
            border-right-color: transparent;
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
            transform: rotate(-45deg);
        }
    </style>
</head>

<body>

    <span><input type="checkbox"class="input_check" id="check3"><label for="check3"></label></span>


</body>

</html>

转载于:https://my.oschina.net/u/3010603/blog/796598

chengzi5521
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js勾选框
weixin_55032665的博客
07-15 981
HTML样式： Css代码： 页面样式： JS代码： 获取元素： 全选： 全不选： 反选：
css实现右下角√对号选中样式——基础积累
yehaocheng520的博客
04-18 5483
css实现右下角√对号选中样式
有趣的css - 勾选动效多选框
最新发布
设计师工作日常
05-23 1193
动效勾选的多选框按钮，适用于注册页中，用户协议勾选时的场景，可以有效增加用户交互体验。
input[type=“checkbox“]:checked实现改变checkbox的样式，js实现点击确认同意后实现勾选checkbox实现方法
qq_38188228的博客
12-11 2473
问题一 怎么实现用CSS改变input 中的type=“checkbox” 属性的样式？ 实现方法 复制以下CSS input[type="checkbox"] { width: 20px; height: 20px; background-color: #fff; -webkit-appearance: none; border: 1px solid #c9c9c9; border-radius: 2px; outline: none; } input[type="checkb
css实现方框内打勾
Stars_in_rain的博客
09-07 2359
css实现方框内打勾 html: <div class="select-container" @click="selectItem(index)"> <i class="feature" v-if="checkBoxArr[index].selectStatus==1"></i> </div> css: .feature { width: 1rem; height: 0.5rem;
css3复选框选中变灰特效
07-24
在本文中，我们将深入探讨如何使用CSS3来创建一个复选框选中变灰的特效。这个特效在用户界面设计中十分常见，可以为用户提供直观的反馈，指示他们已选择或未选择某个选项。让我们逐步解析这个过程。 首先，我们需要...
11种炫酷CSS3复选框checkbox样式美化效果
12-13
例如，index.html和readme.html可能是示例代码和介绍文档，js目录下的文件可能包含用于交互逻辑的JavaScript代码，而css目录则包含了实现这些炫酷效果的CSS样式文件。fonts目录可能包含用于图标替换的字体文件，...
layui table复选框禁止某几条勾选的实例
10-16
最后，我们可以自定义CSS样式来改变禁用复选框的外观： ```css .layui-table-view .layui-form-checkbox.layui-btn-disabled[lay-skin=primary] i, .layui-table-view .layui-form-checkbox.layui-checkbox-...
CSS3当日工作事项列表勾选特效.zip
07-11
3. **JavaScript优化**：虽然纯CSS可以实现基本的勾选效果，但若要增加交互，如动态添加或删除任务，就需要借助JavaScript。例如，可以监听`<input>`的`change`事件，当用户点击时更新列表的样式。 ```javascript ...
纯CSS3 Material Design风格单选框和复选框特效.zip
11-01
这个名为"纯CSS3 Material Design风格单选框和复选框特效.zip"的资源包，显然专注于利用CSS3技术实现Material Design风格的单选框（radio button）和复选框（checkbox）的交互效果。以下将详细介绍这一主题的相关...
改变checkbox背景勾选样式
11-24
改变checkbox背景勾选样式
纯css3勾选美化单选按钮样式
11-04
纯css3勾选美化单选按钮样式 纯css3勾选美化单选按钮样式
html方框打勾字段,HTML+CSS入门 如何设置 checkbox复选框控件的对勾√样式
weixin_29294395的博客
05-31 3140
本篇教程介绍了HTML+CSS入门 如何设置 checkbox复选框控件的对勾√样式，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<我们要创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px*15px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS...
html+css自定义勾选框（单选、复选）
热门推荐
lan_学习分享
07-31 2万+
效果图如上，这里主要是css对勾选时做样式上的处理，在html的<head>标签我们引入jquery和勾选框样式 <title>基本信息</title> <script type="text/javascript" src="jq/jquery.min.js"></script> <style> .span-sty...
css - input勾选框样式
Beluga_白鲸
03-02 1万+
input勾选框样式
自定义复选框checkbox样式 纯css+js
baidu_20876831的博客
06-11 8390
复选框作为网页中比较常见的一个组件，有的时候我们需要对它进行美化，但是我们无法直接为其定义样式，所以我们需要一些其它的办法。表单元素中有label 元素和 for属性，当我们点击label 标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的。html:&lt;body&gt; &lt;input type="checkbox" id="myCheck"&gt; &lt...
CSS自定义checkBox复选框- 对勾样式
若末lan的博客
11-23 1万+
有checkBox复选框需求时，我们所用的框架样式不符合，所以需要自己写 对勾样式，当然用图片也OK。 效果图： html: <div class="msg-position c-bg-wt"> <p>推送岗位<i class="c-rd">*</i>&nbsp;&nbsp;&nbsp;&nbsp...
vue+css实现选择框内打勾效果
weixin_51220466的博客
04-23 6589
很多时候需要做一个打勾的样式，ui库里的样式太局限，这个时候就需要我们自己手写一个打勾的样式。
JavaScript实现勾选穿梭，全选，选项置灰，计数含css样式
05-17
以下是一个实现勾选穿梭、全选、选项置灰和计数的 JavaScript 代码： HTML： ```html <div> <p>可选项目：</p> <ul id="select"> <li> <label> <input type="checkbox" value="1"> 选项1 </label> </li> <li> <label> <input type="checkbox" value="2"> 选项2 </label> </li> <li> <label> <input type="checkbox" value="3"> 选项3 </label> </li> <li> <label> <input type="checkbox" value="4"> 选项4 </label> </li> </ul> </div> <div> <button id="selectAll">全选</button> <button id="transfer">穿梭</button> </div> <div> <p>已选项目：</p> <ul id="selected"> </ul> </div> ``` CSS： ```css li.disabled { color: #ccc; pointer-events: none; } ``` JavaScript： ```javascript const select = document.getElementById('select'); const selected = document.getElementById('selected'); const selectAllBtn = document.getElementById('selectAll'); const transferBtn = document.getElementById('transfer'); function updateCount() { const selectedCount = selected.querySelectorAll('input[type="checkbox"]').length; const totalCount = select.querySelectorAll('input[type="checkbox"]').length; const countEl = document.getElementById('count'); countEl.innerHTML = `${selectedCount} / ${totalCount}`; } // 给所有的可选项目添加事件监听器 select.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => { checkbox.addEventListener('change', () => { // 如果该项目已经被选中，则将其添加到已选项目列表中 if (checkbox.checked) { const li = document.createElement('li'); const label = document.createElement('label'); const text = document.createTextNode(checkbox.parentNode.innerText.trim()); const input = document.createElement('input'); input.type = 'checkbox'; input.value = checkbox.value; input.checked = true; input.addEventListener('change', () => { // 如果该项目被取消选中，则将其从已选项目列表中移除 if (!input.checked) { li.remove(); updateCount(); } }); label.appendChild(input); label.appendChild(text); li.appendChild(label); selected.appendChild(li); updateCount(); } // 如果该项目被取消选中，则将其从已选项目列表中移除 else { const li = selected.querySelector(`li input[value="${checkbox.value}"]`).parentNode.parentNode; li.remove(); updateCount(); } }); }); // 点击 "全选" 按钮时，将所有可选项目添加到已选项目列表中 selectAllBtn.addEventListener('click', () => { select.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => { checkbox.checked = true; checkbox.dispatchEvent(new Event('change')); }); }); // 点击 "穿梭" 按钮时，将所有已选项目移动到可选项目列表中 transferBtn.addEventListener('click', () => { selected.querySelectorAll('input[type="checkbox"]').forEach((checkbox) => { const li = select.querySelector(`li input[value="${checkbox.value}"]`).parentNode.parentNode; li.classList.remove('disabled'); li.querySelector('input[type="checkbox"]').checked = false; li.querySelector('input[type="checkbox"]').dispatchEvent(new Event('change')); checkbox.parentNode.parentNode.remove(); }); updateCount(); }); // 当已选项目列表为空时，禁用 "穿梭" 按钮 const observer = new MutationObserver(() => { if (selected.children.length === 0) { transferBtn.disabled = true; } else { transferBtn.disabled = false; } }); observer.observe(selected, { childList: true }); ``` 实现的效果为： - 点击可选项目后，将其添加到已选项目列表中； - 点击已选项目后，将其从已选项目列表中移除； - 点击 "全选" 按钮后，将所有可选项目添加到已选项目列表中； - 点击 "穿梭" 按钮后，将所有已选项目移动到可选项目列表中，并将已选项目的复选框取消选中； - 当已选项目列表为空时，禁用 "穿梭" 按钮； - 当已选项目列表中的项目被移除时，更新计数器的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值