css点击事件不做反应,纯css无js实现点击事件

已经阅读

主要根据的技术点：

标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

首先这里要实现一个点击后input框出现对号(注意这里的选择对号不是默认的，而是自己设计的有颜色有大小的)如下所示

简单的举例子：设计思路把input标签隐藏，根据input是否处于checked的状态来实现 .box标签通过伪类实现对号的添加。如上label标签绑定input的checkbox输入框，绑定方式是通过id的形式，

label的for值绑定input的id 值，id的绑定使得点击label等同于点击input，通过input 的checked 的状态来实现是否有被点击过的判断。

css代码如下

* {

margin: 0;

padding: 0;

}

.box {

position: relative;

display: block;

float: left;

width: 50px;

height: 50px;

margin-top: 100px;

margin-left: 100px;

border: 1px solid #18c250;

border-radius: 3px;

}

input[type=checkbox]:checked+label .box:before {

content: "";

position: absolute;

top: 28px;

left: 2px;

width: 23px;

height: 3px;

background-color: #18c250;

transform: rotate(45deg);

-webkit-transform: rotate(45deg);

}

input[type=checkbox]:checked+label .box:after {

content: "";

position: absolute;

top: 24px;

left: 15px;

width: 37px;

height: 3px;

background-color: #18c250;

transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

}

.info {

float: left;

margin-top: 92px;

margin-left: 10px;

font-size: 48px;

user-select: none;

}

label {

display: inline-block;

max-width: 100%;

}

input[type=checkbox] {

display: none;

}

css处理事件透过、点击事件透过

// 执行一些动作... $("#myModal2").css("pointer-events","none"); // 执行一些动作... ...

js模拟点击事件实现代码

js模拟点击事件实现代码 类型:转载 时间:2012-11-06 在实际的应用开发中,我们会常常用到JS的模事件,比如说点击事件,举个简单的例子,点击表单外的"提交"按钮来提交表单 ...

纯css、js 的H5页面对接echarts

做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

jquery/js记录点击事件，单击次数加一，双击清零

目的:点击按钮,点击后在网页上显示点击次数,双击清零 实现:js或者jquery 代码如下:

selenium自动化之js处理点击事件失效

有时候,元素明明已经找到了,使用click()就是无法触发点击事件(当然,这种情况十分少见,至少我只遇到过一次).下面告诉大家这种场景的解决方案. 使用js代码来点击[博客园]这个按钮 代码: #!/ ...

js利用点击事件做一个简单的计算器

先放一个样式图: 源代码如下:

vue.js click点击事件获取当前元素对象

Vue.js可以传递$event对象