radio圆框变方框

<html>
<head>
<style>
    .radio{
        top: 12px;
        position: absolute;
        background-image: url("./icon.png");
        background-color: #00A5E3;
        width: 18px;
        height: 18px;
        background-position: -1px -260px;
        background-repeat: no-repeat;

    }
    .radioavtive{
        background-position: -77px -260px;
    }
    .box{
        display: flex;
    }
    .box input{
        z-index: 10;
    }
</style>
</head>
<body>



<div class="box">
    性别:
    <div>
        <div class="radio" id="sex">
        </div>
        <input style="opacity: 0" type="radio" name="sex" value="1" onclick="show(0)"></div>
    <div >
        <div class="radio" style="">
        </div>
        <input style="opacity: 0" type="radio" name="sex" value="1" onclick="show(1)"></div>
</div>
<!--<div class="radio"   >-->
<!--<input style="opacity: 0" type="radio" name="sex" value="1" οnclick="show()">男-->
<!--</div>-->
<!--<div class="radio">-->
<!--    <input style="opacity: 0" type="radio" name="sex" value="2"  οnclick="show()">女-->
<!--</div>-->
</body>
<script>
    function show(type)
    {
        // alert(1);

        var item = document.getElementsByClassName('radio')
        console.log(item)
        item[0].className = "radio"
        item[1].className = "radio"
        item[type].className = "radio radioavtive"
        // item.setAttribute("class","rediocheck");
    }

</script>
</html>

效果:

在这里插入图片描述

附件图片:
在这里插入图片描述

### HTML CSS JavaScript 单选按钮(Radio Button)用法及示例 #### 一、HTML 中单选按钮的基础结构 在 HTML 文档中,`<input>` 元素通过设置 `type="radio"` 来创建单选按钮。为了使一组单选按钮互斥选择,即一次只能选中其中一个选项,则这些单选按钮需共享相同的 `name` 属性值。 ```html <form> <label><input type="radio" name="gender" value="male"> Male</label><br/> <label><input type="radio" name="gender" value="female"> Female</label><br/> <label><input type="radio" name="gender" value="other"> Other</label> </form> ``` 上述代码展示了性别选择的三个单选按钮[^1]。 #### 二、CSS 对单选按钮样式的定制 默认情况下浏览器渲染的原生样式可能无法满足设计需求,因此可以利用 CSS 进行外观美化。下面是一个简单的例子来隐藏原始控件并替换为更美观的选择器: ```css /* 隐藏实际输入 */ [type=radio] { display:none; } /* 定义新的圈背景颜色 */ [type=radio]+span::before{ content:''; background-color:white; border-radius:50%; width:20px;height:20px;display:inline-block; } /* 当关联标签被点击时改伪元素状态 */ [type=radio]:checked+span::after{ position:absolute; top:-7px;left:8px; /* 调整位置使其居中 */ content:""; background:greenyellow; border-radius:50%; height:14px;width:14px; } ``` 此部分代码实现了对单选按钮视觉效果上的增强[^3]。 #### 三、JavaScript 实现功能交互逻辑 借助于 JavaScript 可以为页面带来更加丰富的用户体验。比如当用户选择了某个特定项之后触发某些操作或是验证必填字段等。这里给出一段简单脚本用于监听单选组的化事件,并打印所选项目的值到控制台。 ```javascript document.querySelectorAll('input[name="gender"]').forEach((item)=>{ item.addEventListener('change',function(){ console.log(this.value); }); }); ``` 这段 JavaScript 代码片段能够捕捉用户的互动行为并对之作出响应[^2]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值