首页 > 作文

9.使用CSS样式,自己制作单选框样式和选中功能

更新时间:2023-04-03 17:45:58 阅读: 评论:0

自己制作单选框样式:

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <meta name="viewport" content="width=device-width, initial-scale不达目的不罢休=1.0">    <title>document</title>    <!-- ret.css文件内容参考:https://www.cnblogs.com/lanshanxiao/p/1bus2663192.html -->    <link rel="stylesheet" href="./ret.css">    <style>        .radio-diy .radiocircle {            widt基层单位推荐意见h: 12px;            height: 12px;            border: 1px solid #999;            border-radius: 50%;            cursor: pointer;            display: inline-block;        }                .radio-diy input:checked+span {            border: 1点斜式方程公式px solid#008c8c;        }        .radio-diy input:checked~span {            color: #008c8c;        }        .radio-diy input:checked+span.radiocircle::after {          导游证报考条件  content: "";            display: block;            width: 6px;            height: 6px;            background: #008c8c;            border-radius: 50%;            cursor: pointer;            margin-left: 3px;            margin-top: 3px;        }        input[type="radio"] {            display: none;        }    </style></head><body>    请选择性别:    <label class="radio-diy">        <input type="radio" name="gender" value="male">        <span class="radiocircle"></span>        <span>男</span>    </label>    <label class="radio-diy">        <input type="radio" name="gender" value="female">        <span class="radiocircle"></span>        <span>女</span>    </label></body></html>

效果展示:

本文发布于:2023-04-03 17:45:56,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/c953da235dc492f07b7568bc806a3b5c.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:9.使用CSS样式,自己制作单选框样式和选中功能.doc

本文 PDF 下载地址:9.使用CSS样式,自己制作单选框样式和选中功能.pdf

下一篇:返回列表
标签:目的   请选择   方程   公式
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图