HTML label的隐藏,html – 带有可见的隐藏元素：after

我猜这是因为大卫托马斯认为伪元素是不可见的,因为它是’父元素’.它在其他浏览器中工作的原因可以通过不同的实现来解释,其中伪元素可能不被认为是元素的子元素？

另一种方法

无论如何,我有一些像这样的复选框和单选按钮的经验.我学到的一个非常酷的技巧是隐藏< input>关闭屏幕并设置关联的< label>用一些花哨的选择器技巧.此方法利用了点击< label>的事实.还会点击相关的< input>.

HTML

CSS

input[type="checkBox"] {

position:absolute;

left:-9999px;

top:-9999px;

}

input[type="checkBox"] + label {

visibility:visible;

content:"W";

display:block;

background:#0ab9bf;

width:20px;

line-height:20px;

text-align:center;

height:20px;

overflow:hidden;

}

input[type="checkBox"]:checked + label {

background:#F00;

}

改进方法

这个方法使用a b选择器,这意味着选择b紧跟在a之后.那么< label>必须在< input>之后.一种“更安全”的方法是使用通用兄弟选择器a~b将它们包装在容器和样式中.然后,样式将容忍< label>在不同的位置,只要他们仍然是兄弟姐妹.

It will still work!

兼容性

独立此方法与IE8及以下版本不兼容,因为它不支持：已选中.解决这个问题的通常方法是添加一个类.checked,但不幸的是IE8在更改类时也有一个rendering bug,而你需要更多hacky JavaScript.

var labels = document.querySelectorAll('label');

for (var i = 0; i < labels.length; i++) {

labels[i].onclick = handleClick;

}

function handleClick () {

var checkBox = document.getElementById(this.getAttribute('for'));

// do something with checkBox.checked

alert(checkBox.checked);

}

幸运的是,由于now tiny market share(<0.77％),你不需要支持低于8的任何东西.

HTML label的隐藏,html – 带有可见的隐藏元素：after – CSS相关推荐

display none 隐藏后怎么显示_Web 隐藏技术：几中隐藏 Web 中的元素方法及优缺点
在 Web 开发中出于多种原因,我们需要隐藏元素.例如,一个按钮应该在移动中可见,而在桌面视口中隐藏.或者,在移动设备上隐藏但要在桌面上显示的导航元素.隐藏元素时有三种不同的状态: 元素完全隐藏并从文 ...
jquery显示隐藏切换_jQuery显示，隐藏，切换
jquery显示隐藏切换 Earlier we looked into how we can use jQuery get attribute, today we will look into thr ...
（专升本）Excel中的隐藏（行、列的隐藏，工作表的隐藏，工作簿的隐藏）
隐藏行.列的隐藏隐藏工作表的方法隐藏工作簿和取消工作簿行.列的隐藏 #mermaid-svg-JqppfU72PeLliNIt .label{font-family:'trebuchet ms ...
案例分享：Qt多通道数据采集系统（通道配置、电压转换、采样频率、通道补偿值、定时采集、导出excel和图表、自动XY轴、隐藏XY轴、实时隐藏显示通道）
若该文为原创文章,转载请注明原文出处本文章博客地址:https://blog.csdn.net/qq21497936/article/details/110941614 长期持续带来更多项目与技术分 ...
php如何隐藏入口文件,PHP怎样隐藏入口文件
这次给大家带来PHP怎样隐藏入口文件,PHP隐藏入口文件的注意事项有哪些,下面就是实战案例,一起来看一下. 第一步:开启apache重写模块重启apache LoadModule rewrite_m ...
bootstarp js设置列隐藏_bootstrap table getHiddenColumns获取隐藏的列的方法
bootstrap table getHiddenColumns获取隐藏的列的方法 bootstrap table getHiddenColumns获取表格隐藏的列,即获取哪些列当前不可见的列,因为有 ...
10无法勾选隐藏的项目_Excel的隐藏和保护，你会用吗？
工作中我们经常会遇到把表格部分隐藏,全部隐藏或者公式保护,内容保护及隐藏保护的混合使用. 今天我们就来总结一下吧. 一．隐藏隐藏涉及行列,单元格内容,工作表及工作表标签,公式等. 隐藏行.列方法一 ...
cad2010怎么隐藏标注尺寸,cad2007怎么隐藏标注尺寸
1.CAD2007怎么隐藏所有的标注尺寸? 1.在"查看器"菜单面板中隐藏的工具有"线宽"."测量"."文本"三种工具, ...
jQuery便利多个相同的class，点击显示隐藏图标，显示及隐藏其下的内容
这里使用了bootstrap 而jQuery的遍历标签 each 和事件hide().show().toggle(); 直接上代码: <!DOCTYPE html> <html la ...

HTML label的隐藏,html – 带有可见的隐藏元素：after – CSS

HTML label的隐藏,html – 带有可见的隐藏元素：after – CSS相关推荐

最新文章

热门文章