react+antd Radio单选图片样式

布满荆棘的人生 2022-10-27 02:28 14阅读 0赞

![效果][20210203113156182.gif_pic_center]

<Radio.Group onChange={ onChange} value={ value}>
      { radioArr.map(item => (
        <div className={ classnames(styles.selectEveryBox, styles[item.img])}>
          <Radio value={ item.value}/>
        </div>
      ))}
    </Radio.Group>

css

:global { 
     .ant-radio-inner { 
        width: 320px;
        height: 220px;
        position: absolute;
        border-radius: 8px;40px;
      }
      .ant-radio-inner::after { 
        width: 60px;
        height: 60px;
        top: -28px;
        border-radius: 50%;
        right: -28px;
        left: 288px;
      }
      .ant-radio-inner::before{ 
        position: absolute;
        top: -12px;
        right: -15px;
        font-family: "iconfont" !important;
        font-size: 30px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\e60d";//icon 图标 （对勾）
        color: #fff;
        z-index: 1;
      }
    }
    .xuanduoren { 
      :global { 
        .ant-radio-inner { 
          background: url('../../../../assets/xuanduoren.png') no-repeat 60px 40px;
        }
      }
    }
    
    .allpeople { 
      :global { 
        .ant-radio-inner { 
          background: url('../../../../assets/allpeople.png') no-repeat 60px 40px;
        }
      }
    }
    
    .xuanzewenzhang { 
      :global { 
        .ant-radio-inner { 
          background: url('../../../../assets/xuanwenzhang.png') no-repeat 60px 40px;
        }
      }
    }

[20210203113156182.gif_pic_center]: /images/20221024/60431ff522d643d6b23e2326ceadf8eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-element：修改radio-button（单选框按钮）的样式

一、设置宽度（由于无法直接设置span的宽度） ![20210519121438614.png][] <el-radio-button label="上海">这里有

￡神魔★判官ぃ/ 2023年01月22日 09:57/ 0 赞/ 12 阅读

相关 JAVA如何自定义布局单选框,自定义单选框radio样式

自定义单选框radio样式 body \{ margin: 0; \} input \{ padding: 0; margin: 0; border: 0; \} .fe

迷南。/ 2023年01月16日 03:25/ 0 赞/ 260 阅读

相关 react+antd Radio单选图片样式

![效果][20210203113156182.gif_pic_center] <Radio.Group onChange={ onChange} value={ v

布满荆棘的人生/ 2022年10月27日 02:28/ 0 赞/ 15 阅读

相关改变单选按钮radio的默认样式

默认的radio的样式很丑，那么如何改变其默认的样式呢？我最开始想的是能不能直接给radio设置背景色等，发现并没有用！可以借助于标签来创建一个类似于radio的效果。

蔚落/ 2022年08月22日 00:19/ 0 赞/ 342 阅读

相关 Form-radio单选框

el-radio的 label属性是该 radio 对应的值，若该标签中无内容，则该属性也充当 radio 按钮后的介绍。 <!--要使用 Radio 组件，只需要

Love The Way You Lie/ 2022年04月10日 10:43/ 0 赞/ 394 阅读

相关 input radio,改装input单选框样式，单选框input修改默认样式

HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3

缺乏、安全感/ 2022年04月08日 15:29/ 0 赞/ 381 阅读

相关单选radio

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Dear 丶/ 2022年01月27日 00:11/ 0 赞/ 311 阅读

相关自定义样式的radio单选按钮

//自定义单选radio HTML 代码： <label class="defined-label"> <input class="def

曾经终败给现在/ 2021年11月17日 02:00/ 0 赞/ 408 阅读

相关 uniapp 修改radio/checkbox（单选框/复选项）样式大小

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvX2xp

爱被打了一巴掌/ 2021年09月13日 15:42/ 0 赞/ 3800 阅读

相关改变单选radio样式

<label class="checkbox-container"> <input type="radio" value="影视" name="in

偏执的太偏执、/ 2021年09月10日 07:02/ 0 赞/ 497 阅读