点击文字选中的单选和复选框

<html>
<head>
<title>中国站长天空-网页特效-表单特效-点击文字选中的单选和复选框</title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<form>


<input type="radio" id="radio1" value="123" name="name"><label for="radio1">男</label>
<input type="radio" id="radio2" value="123" name="name"><label for="radio2">女</label>
<input type="checkbox" id="check1" value="456" name="name"><label for="check1">姓名</label>
<input type="checkbox" id="check2" value="456" name="name"><label for="check2">密码</label>
</form>
</body>
</html>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
单选框变成复选框需要修改HTML代码和CSS样式。 1. 修改HTML代码: 将单选框的input标签的type属性值从"radio"修改为"checkbox"。 例如,原来的单选框代码: ```html <input type="radio" name="gender" value="male">Male <input type="radio" name="gender" value="female">Female ``` 改为复选框代码: ```html <input type="checkbox" name="gender" value="male">Male <input type="checkbox" name="gender" value="female">Female ``` 2. 修改CSS样式: 复选框需要显示为方框,而不是原来的圆点。我们需要使用CSS样式修改复选框的外观。可以使用伪类选择器:checked来设置选中状态下的样式。 例如: ```css input[type="checkbox"] { /* 隐藏原始选择框 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* 制作方框 */ border: 2px solid #999; width: 18px; height: 18px; display: inline-block; position: relative; border-radius: 3px; margin-right: 5px; } /* 选中状态的样式 */ input[type="checkbox"]:checked::before { content: "\2714"; display: inline-block; position: absolute; top: -1px; left: 1px; line-height: 18px; font-size: 14px; color: #fff; padding: 0 3px; background-color: #4CAF50; border-radius: 3px; } ``` 上面的样式代码将复选框修改为了方框样式,并使用checked伪类选择器来设置选中状态下的样式。 完整的修改后的代码如下: ```html <input type="checkbox" name="gender" value="male" id="maleCheck"><label for="maleCheck">Male</label> <input type="checkbox" name="gender" value="female" id="femaleCheck"><label for="femaleCheck">Female</label> <style> input[type="checkbox"] { /* 隐藏原始选择框 */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* 制作方框 */ border: 2px solid #999; width: 18px; height: 18px; display: inline-block; position: relative; border-radius: 3px; margin-right: 5px; } /* 选中状态的样式 */ input[type="checkbox"]:checked::before { content: "\2714"; display: inline-block; position: absolute; top: -1px; left: 1px; line-height: 18px; font-size: 14px; color: #fff; padding: 0 3px; background-color: #4CAF50; border-radius: 3px; } </style> ``` 注意,为了使复选框文字可以一起使用,我们使用了label标签,并将for属性设置为相应的复选框的id值。这样点击文字就可以选中相应的复选框

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值