在html里写一个checkbox选择框,并写上CSS样式和注释
时间: 2023-05-16 11:06:24 浏览: 60
好的,以下是在HTML中写一个checkbox选择框的代码,以及相应的CSS样式和注释:
HTML代码:
```html
<!-- 这是一个checkbox选择框 -->
<input type="checkbox" id="myCheckbox" name="myCheckbox" />
<!-- 这是一个label标签,用于关联checkbox和文本 -->
<label for="myCheckbox">我同意相关条款和条件</label>
```
CSS样式:
```css
/* checkbox的样式 */
input[type="checkbox"] {
/* 隐藏原始的checkbox */
display: none;
}
/* label的样式 */
label {
/* 设置label的样式为inline-block,使其能够被宽度和高度控制 */
display: inline-block;
/* 设置label的宽度 */
width: 200px;
/* 设置label的高度 */
height: 30px;
/* 设置label的背景颜色 */
background-color: #f2f2f2;
/* 设置label的边框 */
border: 1px solid #ccc;
/* 设置label的圆角 */
border-radius: 5px;
/* 设置label的内边距 */
padding: 5px;
/* 设置label的字体大小 */
font-size: 14px;
/* 设置label的字体颜色 */
color: #333;
}
/* checkbox被选中时label的样式 */
input[type="checkbox"]:checked + label {
/* 设置label的背景颜色 */
background-color: #4CAF50;
/* 设置label的字体颜色 */
color: #fff;
}
```
注释:
```html
<!-- 这是一个checkbox选择框 -->
<!-- input标签的type属性设置为checkbox,表示这是一个checkbox选择框 -->
<!-- id和name属性可以自定义,用于后续的操作 -->
<input type="checkbox" id="myCheckbox" name="myCheckbox" />
<!-- 这是一个label标签,用于关联checkbox和文本 -->
<!-- for属性的值应该与checkbox的id属性相同,这样点击label时就会选中checkbox -->
<label for="myCheckbox">我同意相关条款和条件</label>
```
```css
/* checkbox的样式 */
/* input[type="checkbox"]表示选择所有type属性为checkbox的input标签 */
input[type="checkbox"] {
/* 隐藏原始的checkbox */
display: none;
}
/* label的样式 */
label {
/* 设置label的样式为inline-block,使其能够被宽度和高度控制 */
display: inline-block;
/* 设置label的宽度 */
width: 200px;
/* 设置label的高度 */
height: 30px;
/* 设置label的背景颜色 */
background-color: #f2f2f2;
/* 设置label的边框 */
border: 1px solid #ccc;
/* 设置label的圆角 */
border-radius: 5px;
/* 设置label的内边距 */
padding: 5px;
/* 设置label的字体大小 */
font-size: 14px;
/* 设置label的字体颜色 */
color: #333;
}
/* checkbox被选中时label的样式 */
/* input[type="checkbox"]:checked表示选择所有被选中的checkbox */
/* +表示选择紧接在前面的兄弟元素,即选择紧接在被选中的checkbox后面的label标签 */
input[type="checkbox"]:checked + label {
/* 设置label的背景颜色 */
background-color: #4CAF50;
/* 设置label的字体颜色 */
color: #fff;
}
```