改变checkbox样式问题

选择1 选择2 选择3 选择4 选择5

<form action=""><label for="test">选择1<input type="checkbox" id="test"><div class="checkboxdiv"></div></label> 选择2<input type="checkbox"> 选择3<input type="checkbox"> 选择4<input type="checkbox"> 选择5<input type="checkbox">
</form>

label {font-size: 12px;
/*   调整vertical-align的值实现水平对齐 */vertical-align: 3px;
}
/* 将默认的样式隐藏，使用另一个div模拟 */
#test {display: none;
}.checkboxdiv {width: 30px;height: 30px;display: inline-block;border-radius: 3px;border:1px solid #85a2cd;margin-right: 10px;vertical-align: middle;
}#test:checked ~.checkboxdiv {background-color: red;
}

https://codepen.io/anon/pen/VrmjvG

转载于:https://www.cnblogs.com/Web-Architecture/p/7804079.html

改变checkbox样式问题相关推荐

改变checkbox样式
开发工具与关键技术:Dreamweaver CC 2017 作者:林诗雄撰写时间:2019年1月17日 checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式首先 ...
input[type=checkbox] ; input[type=radio] 改变默认样式
/*改变checkbox 默认样式*/input[type="checkbox"] { -webkit-appearance: none; /*清除复选框默认样式*/ height ...
【CSS】自定义checkbox样式
修改原生checkbox样式. 效果原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
php复选框样式,如何自定义checkbox样式？附代码
本篇文章给大家带来的内容是关于如何自定义checkbox样式?附代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 修改原生checkbox样式. 效果原理 1.利用CSS3属性 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
关于无法修改CheckBox样式的解决方案
关于无法修改CheckBox样式的解决方案参考文章: (1)关于无法修改CheckBox样式的解决方案 (2)https://www.cnblogs.com/yangjf/archive/2012/ ...
js改变style样式和css样式
js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下: [html] view plaincopy < ...
通过CSS修改checkbox样式(利用label的for属性进行焦点传递)
需求背景: 在页面设计时,常常会用到input复选框.如果用到一些前端框架的话,一般复选框的样式都可以满足需要:但是对于未使用前端框架,直接原生的话样式可能满足不了项目需要,因此我们需要修改复选框的样 ...

改变checkbox样式问题

改变checkbox样式问题相关推荐

最新文章

热门文章