html+css3实现自定义radio

最新推荐文章于 2023-06-13 16:36:37 发布

timelessmemoryli

最新推荐文章于 2023-06-13 16:36:37 发布

阅读量2.7k

点赞数

分类专栏： html+css/html5 文章标签：自定义radio html css3

本文链接：https://blog.csdn.net/u014788227/article/details/69226349

版权

本文介绍如何利用HTML和CSS3的特性，详细步骤和代码示例展示了如何自定义传统的radio按钮，实现视觉上的独特效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>radio</title>
        <style type="text/css">

        .radio-group {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            height: 2.2em;
            font-size: 1.6rem;
            padding: 0px 1em;
        }

        .radio-group .radio {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center