html中怎么隐藏复选框,隐藏复选框字段HTML

替代他们，我改变了你的标记，使用形式。 JavaScript是没有必要的(除非你需要支持IE8以上的浏览器)

每一个复选框包括它的标签，它是透明的：所以当你点击你实际点击复选框的颜色。所选颜色的不同样式通过:checked伪类应用。

标记

Gray
Red
Green
Blue

CSS：

ul {

list-style: none;

}

li {

position: relative;

height: 40px;

width: 40px;

margin: 5px 0;

}

input {

position: absolute;

z-index: 1;

width: 100%;

height: 100%;

opacity: .01;

cursor: pointer;

}

label {

display: block;

width: 100%;

height: 100%;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

text-indent: 100%;

overflow: hidden;

}

[name="y"] + label { background: gray; }

[name="r"] + label { background: red; }

[name="g"] + label { background: green; }

[name="b"] + label { background: blue; }

input:checked + label {

border: 5px #fff double;

}

注意：您也可以得到同样的行为，如果你display: none您的复选框和标签上使用一个for属性(在该情况也使用标签上的cursor: pointer以获得更好的可用性)—这里的这种方法的一个例子：http://codepen.io/anon/pen/wGBvq

html中怎么隐藏复选框,隐藏复选框字段HTML相关推荐

TreeView的复选框隐藏重新整理
CheckBoxes 为真代码如下 using System.Runtime.InteropServices; #region 树的复选框隐藏private const int TVIF_STATE ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
python from win32com import client 出现弹框隐藏模块中出现编译错误
python from win32com import client 出现弹框隐藏模块中出现编译错误调用client 出现弹窗出现弹窗后代码暂停运行,等待点击掉弹窗才能继续运行还有一个弹框是 ...
Vue Element-ui table隐藏表头勾选框，多选框改单选框
在table中添加class = "table-style" 在style里添加样式 .table-style /deep/ .el-table-column--selectio ...
html表格中插入单行文本框,el-table复选框选中单行或多行点击按钮禁用el-table里面的input输入框该怎么判断？...
问题: 1.添加数据后下拉框中未显示带入的数据 2.不可以重复添加相同的数据 3.复选框选中单行或多行以后点击按钮禁用对于行的input 大神们帮忙看看怎么解决啊. Title v-model=&q ...
JS判断HTML中创建的单选框、复选框、下拉列表框是否被选中
目录一.单选框: 二.复选框: 三.下拉列表框: 一.单选框: 有如下单选框:radio <div class="form-text">性别:</div> ...
html中的下拉列表框，单选框和复选框
下拉列表框: 下拉列表框是指允许网页浏览者从下拉式菜单中选择某一项,我们通常会在网页中看到各种下拉列表框,这是一种最节省空间的方式.正常情况下,浏览者只能看见一个选项,单击选项按钮打开菜单后才能看到全 ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
复选框的全选、全不选、和获取选中的值；
1.获取select下面的选中的option值 <select id="afterSaleReson" name="afterSaleReson"> ...
PyQt5 复选框（勾选框）
-- coding: utf-8 -- import sys from PyQt5.QtWidgets import QApplication, QWidget, QCheckBox from PyQ ...

html中怎么隐藏复选框,隐藏复选框字段HTML

html中怎么隐藏复选框,隐藏复选框字段HTML相关推荐

最新文章

热门文章