input checkbox 多选选中样式

最新推荐文章于 2023-09-15 10:11:55 发布
最新推荐文章于 2023-09-15 10:11:55 发布
阅读量829 收藏
点赞数
原文链接：http://www.cnblogs.com/divtab/p/11374842.html
版权

input checkbox 多选选中样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox css change</title>
<style type="text/css">
//选择input类型是checkbox的标签 前面的label
input[type="checkbox"] + label {
    cursor: pointer;
    font-size: 1em;
}
[id^="checkbox-"] + label {
    //未选中的框框
    background-color: #ffffff;
    border: 1px solid #666666;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
}
[id^="checkbox-"] + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
[id="checkbox-1"]:checked + label {
    //未读选中后
    background-color: #F47164;
    border: 1px solid #F47164;
}
[id="checkbox-2"]:checked + label {
    background-color: #84CBC5;
    border: 1px solid #84CBC5;
}
[id="checkbox-3"]:checked + label {
    background-color: #F8D25D;
    border: 1px solid #F8D25D;
}
</style>
</head>
<body>
    <label style="margin-left: 55px; margin-right: 16px;">状态:</label>
    <input type="checkbox" value="0" class="check_view_state"
        id="checkbox-1" style="display: none;">
    <label for="checkbox-1"></label>
    <span class="status">未读</span>

    <input type="checkbox" value="1" class="check_view_state"
        id="checkbox-2" style="display: none;">
    <label for="checkbox-2"></label>
    <span class="status">已读</span>

    <input type="checkbox" value="2" class="check_view_state"
        id="checkbox-3" style="display: none;">
    <label for="checkbox-3"></label>
    <span class="status">未授权</span>
</body>
</html>

转载于:https://www.cnblogs.com/divtab/p/11374842.html

weixin_30849591
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
改变checkbox背景勾选样式
11-24
改变checkbox背景勾选样式
Checkbox选框样式
zcn596785154的博客
12-31 711
drawable文件夹下定义selector_checkbox.xml样式文件
微信小程序重写checkbox的样式，将方块变成圆形 css
qq_45832807的博客
07-08 3367
/* 重写 checkbox 样式 */ /* 未选中的 背景样式 */ checkbox .wx-checkbox-input{ border-radius: 50%;/* 圆角 */ width: 46rpx; /* 背景的宽 */ height: 46rpx; /* 背景的高 */ } /* 选中后的 背景样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked{ border: 1rpx .
checkbox选中改变默认样式,改变颜色，一般用背景图
IT技术宅-北方的刀郎
10-20 1354
###checkbox选中改变默认样式,改变颜色，一般用背景图 .cconte div input[type='checkbox']{ position: absolute; left:-0.2rem; top: .1rem; -webkit-appearance: none; appearance:none;//去掉复选框的默认背景样式 -moz-appearance:none; display: block; wid...
input修改checkbox复选框默认选中样式
m0_53206841的博客
09-15 2408
input修改checkbox默认选中样式，直接设置选中后的样式不生效，需要先给复选框设置-webkit-appearance: none（取消默认样式）， 再设置样式才会生效。
自定义checkbox选中样式
m0_37378152的博客
03-10 895
方案1：修改label的before html： <div class="custom-checkbox"> <input id="checkbox" type="checkbox" name="checkbox"> <label for="checkbox"></label> <span>自定义勾选</span> </div> css: .custom-checkbox
通过css3实现checkbox选择样式
hsany330的专栏
08-10 1030
前端开发过程中，由于不同浏览器间的不兼容性，相同的标签在不同的浏览器中显示不同的效果。尤其在移动端开发中，安卓与iOS表单元素显示各不相共，所以在前端页面开发过程中，需要统一相关样式，前端er需要自己开发相应组件去实现对应标签功能。 知识点： css3中before与after选择器，兄弟选择器，checked选择器 本示例通过css3实现浏览器下checkbox选中与未选中效果。 实现效果示例 1、html结构 <div class='checkbox'> <input
纯CSS设置Checkbox复选框控件的样式
qq_27009517的博客
08-12 5947
下面是纯CSS设置Checkbox复选框控件的五种简单样式，有兴趣的可以进行改动将其变成自己想要的样式。 首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。 隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。 样式一
使用jquery动态改变checkbox选中和样式
zongxingfengyun的博客
03-29 1765
使用jquery动态改变checkbox选中和样式
CSS实现checkbox选中动画
苏苏就是小苏苏的博客
03-02 2441
👏CSS实现checkbox选中动画，速速来Get吧~🥇文末分享源代码
checkbox在vue中的用法小结
01-21
关于checkbox多选框是再常见不过的了，几乎很多地方都会用到，这两天在使用vue框架时需要用到checkbox多选功能，实在着实让我头疼，vue和原生checkbox用法不太一样，之前对于vue中用到过的checkbox也只是别人写好的...
微信小程序把玩《五》：checkbox组件，form组件，input组件
03-29
一：checkbox组件 ...checkbox多选属性： (此图片来源于网络，如有侵权，请联系删除! ) wxml <!--checkbox-group就是一个checkbox组 有个监听事件bindchange，监听数据选中和取消--> <checkbox-
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
12-29
因为是内部用，样式也不要求太好看，直接上代码。 示例代码： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <...
使用CSS3编写类似iOS中的复选框及带开关的按钮
01-19
checkbox多选 最近写了一个适合移动端的checkbox，如图： ps：中间的勾勾是iconfont，iOS风格的。 具体的HTML： XML/HTML Code复制内容到剪贴板 <div u00a0class=mui-checkbox-con>    <input class=mui-...
Ext 开发指南 学习资料
08-31
2.6. 更进一步，自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了，请允许我让2.0先上场。 2.7. 分页了吗？分页了吗？如果还没分就看这里吧。 2.7.1. 表面工作，先把分页工具条弄出来。 2.7.2. ...
【选中时样式变化】el-checkbox中选中时增加边框样式
x781054643的博客
05-17 643
【项目实践时】【选中时样式变化】el-checkbox中选中时增加边框样式。
CheckBox 自定义选中样式
weixin_48923034的博客
11-26 387
第一步 在drawable下创建文件一个.xml文件 名字随便起一个 符合命名规范就行 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/icon_a" android:state_checked="false" /> &lt
checkbox自定义样式
weixin_42887827的博客
07-17 5899
checkbox自定义样式1 1 常见的自定义样式是改变checkbox的button图片，但是他的需求是去掉checkbox的选项框，使checkbox的样式类似button。我最初给的建议是使用TextView，点击一次改变背景颜色，然后保存当前状态（选中或未选中），但还是很麻烦，查找资料，找到了第二种checkbox的自定义样式方式，总结一下，备忘。 一、修改checkbox选项框样式 ...
使用css修改input框中checkbox的样式
qq_27009517的博客
08-11 5610
概述 在页面设计时，我们经常使用input复选框。由于界面设计的需要，我们需要修改复选框的样式，使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂，通常修改的方式有两种，一个是链入图片，另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单，但是需要预先设计或者下载图片，比较麻烦。纯css的方法，只需要在css文件中编写代码，个人觉得比较方便，因此，本文使用该方式对input中的CheckBox进行设置。 实现效果 本文在设计时，希望达到以下效果，如图所示，每...
checkbox多选 wpf
最新发布
01-13
总结一下，使用Checkbox控件实现多选功能的步骤包括：在XAML中声明Checkbox控件并设置IsChecked属性，编写事件处理程序来处理选中状态变化事件，根据IsChecked属性值来确定用户选择的选项，并加入额外的逻辑来满足...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值