css怎么自定义radio单选框样式

发布时间:2022-01-21 16:47:11 作者:iii
来源:亿速云 阅读:745

今天小编给大家分享一下css怎么自定义radio单选框样式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

自定义radio单选框样式的方法:

  html部分

  <divclass="radio">

  <label>

  <inputname="feel"type="radio"value="love"/>

  <spanclass="pos">

  <spanclass="radio_bg">

  <spanclass="radio_on"></span>

  </span>

  </span>

  <span>LOVE</span>

  </label>

  <label>

  <inputname="feel"type="radio"value="hate"/>

  <spanclass="pos">

  <spanclass="radio_bg">

  <spanclass="radio_on"></span>

  </span>

  </span>

  <span>YOUARENICE</span>

  </label>

  </div>

  css样式部分

  .radio{

  width:260px;

  height:26px;

  line-height:26px;

  margin:200pxauto;

  background-color:#ddeef1;

  font-size:16px;

  color:#495060;

  text-align:center;

  }

  label:first-child{

  margin-right:40px;

  }

  labelinput,.radio_on{

  display:none;

  }

  .pos{

  display:inline;

  vertical-align:middle;

  }

  .radio_bg{

  position:relative;

  display:inline-block;

  height:14px;

  width:14px;

  border:1pxsolid#B3B4B8;

  border-radius:50%;

  }

  label:hover.radio_bg,labelinput:checked+span.posspan.radio_bg{

  border:1pxsolid#27B28B;

  }

  labelinput:checked+span.posspan.radio_bg.radio_on{

  display:inline-block;

  position:absolute;

  top:2px;

  left:2px;

  width:10px;

  height:10px;

  border-radius:50%;

  background-color:#27B28B;

  }

以上就是“css怎么自定义radio单选框样式”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。

推荐阅读:
  1. CSS怎么自定义checkbox样式
  2. css自定义radio单选框样式的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css radio

上一篇:Python开发中需要摒弃的坏习惯有哪些

下一篇:nginx如何配置反向代理

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》