自定义单选框样式

最新推荐文章于 2023-06-27 14:10:05 发布

just_xiaowei

最新推荐文章于 2023-06-27 14:10:05 发布

阅读量133

点赞数

分类专栏：前端常见小组件文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/just_xiaowei/article/details/128997398

版权

前端常见小组件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇文章展示了如何使用CSS样式来定制HTML中的radio类型input，通过移除原生样式并利用伪元素创建圆形的单选按钮。主要涉及到border-radius、appearance属性以及CSS布局技巧。

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

原理:就是把原生的input的radio类型的样式去掉,然后利用伪元素实现

border-radius:设置50%就成圆形

代码

<template>
  <div class="changeOver">
    <label>
      <input type="radio" name="original" checked /><span>第一个</span>
    </label>
    <label>
      <input type="radio" name="number" class="radio" checked /><span
        >第一个</span
      >
    </label>
    <label>
      <input type="radio" name="number" class="radio" /><span>第二个</span>
    </label>
  </div>
</template>

<script>
export default {};
</script>

<style>
.changeOver {
  display: flex;
  flex-direction: column;
  position: absolute;
  background: #fff;
  top: 8px;
  left: 16px;
}
label {
  width: 130px;
  height: 26px;
  display: flex;
  line-height: 26px;
}
span {
  display: inline-block;
}
.radio {
  width: 16px;
  height: 16px;
  appearance: none; /*隐藏原生单选框的样式*/
  -webkit-appearance: none; /*隐藏原生单选框的样式*/
  outline: none;
  border-radius: 50%;
  position: relative;
}
.radio:before,
.radio:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
}
.radio:before {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid green;
}
.radio:after {
  top: 6px;
  left: 6px;
  width: 5px;
  height: 5px;
  background-color: #fff;
  border-radius: 50%;
}
.radio:checked:after {
  top: 5.2px;
  left: 5.5px;
  width: 9px;
  height: 9px;
  background-color: green;
}
.radio:checked:before {
  border-color: green;
}
</style>