html input 多选box标签,利用HTML中的<label>标签与<input>标签的checked属性制作点击轮!...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

大家好！我是伯特-n0。

下面我给大家分享一下利用HTML中的标签 的checked选择器。制作点击按钮轮播图片的效果。

页面效果如下：

HTML布局：

首先一个div把四个标签包裹着，用type="text"属性把属性值改变成radio，标签就变成了一个单选框的样式；还要加一个name="ra"属性，而属性值并不是固定的，但是属性值必须一致，每个都要有name=""属性,而且name=""属性调动循环点击轮播，还有调动的高亮效果跟着点击的跳转；

在加最后一个标签后加一个div包裹着四张图片，而且第一个img上加上s1，在css样式上运用:checked 选择器匹配每个选中的元素；

然后在标签上加id；

在最外层div下再加一个div，div里面加四个标签，并且在标签上加for=""属性，而且for有聚焦作用，属性值添加时一定要注意跟标签上的id一一对应，否则该轮播无效；

HTML代码如下：(注意：有包裹着的皆为注释)

利用HTML中的标签的checked属性制作点击轮播！

标签样式是通过css的宽高边框得到的矩形，而矩形内的背景颜色是通过:hover伪，类鼠标移入改变背景颜色。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 标签的 for 属性应当与相关元素的 id 属性相同。

接下来看看css样式吧！(注意：有包裹着的皆为注释)

@charset "utf-8";/* CSS Document */

*{

margin: 0;

padding: 0;

background-color: #fff;

}

.box{

margin-left: 35%;

width: 405px;

overflow: hidden;

}

.leftbox{

width: 1650px;

}

.buttn{

display: inline-block;

width: 400px;

height: 400px;

}

.buttn img{

width: 100%;

height: 100%;

}

.navigation{

margin-top: 10px;

width: 400px;

margin-left: 40%;

display: flex;/*/弹性布局，设置按钮位置/*/

}

.navigation label{/*边框颜色*/

border-color: #DC080C;

}

label{ /*/设置按钮属性/*/

width: 50px;

height: 10px;

border: 2px solid #fff;

margin: 6px;

cursor: pointer; /*/把鼠标设置为手/*/

transition: 0.5s; /*/按钮背景变色时间/*/

}

label:hover {

background: #FFE32C;

}

/*设置margin让它向左轮播*//*:checked 选择器匹配每个选中的元素*//* ~ 兄弟元素选择器*/

#r1:checked~ .leftbox .s1 {

margin-left: 0;

transition: .5s; /*设置图片轮播过度的时间*/

}

#r2:checked~ .leftbox .s1 {

margin-left: -24.5%;

transition: .5s;

}

#r3:checked~ .leftbox .s1 {

margin-left: -48.9%;

transition: .5s;

}

#r4:checked~ .leftbox .s1 {

margin-left: -73.6%;

transition: .5s;

}

/*通过 :checked 关联整个轮播选择器匹配每个选中的元素*/

/*：checked 是伪类选择器，用来对应被选择的单选框或者复选框~ 是代表选择 checked 的后面的兄弟节点比如 有两个选项 每个选项有一个同级兄弟节点

:checked ~ .divboxchecked 选在哪个，就代表 可以控制 checked和后面的 divbox 的CSS效果*/

总结：

利用HTML中的标签 的checked属性。制作点击按钮轮播图片的效果，要注意三点：

1.input标签type属性的属性值要注意改变为单选框的样式，还有name属性的属性值必须一致；

2.第一个img标签的类上必须还要加上一个“s1”或者其它来供:checked 选择器匹配；

3. 标签的for属性的属性值一定要跟标签上的id一一对应。标签当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上(不建议换其它标签)；