我们都知道，input的单选框是一个小圆框，不能直接更改样式。但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式（看上去没啥新意，也比较丑）。那么，接下来我将介绍下如何实现该功能。

　　首先，让我们来看下单选框的实现：

　　在html中的input元素中，将其type属性值设置为radio，即为单选框，此时只需将要设置的单选选项的name属性设置成一致的，即可实现单选功能。

  1. 代码实现如下：
  2.  
  3. <input type="radio" name="gender" value="male">男
  4. <input type="radio" name="gender" value="female">女

　　要实现单选框样式改变，只需以下几步：

1、首先给出input的type属性为radio，设置相同name。同时用label将相应字段关联上该input属性（当label的for属性值与input的id属性值相同时 ，即可关联。关联上之后，点击字段即可选中相应的单选框）。

  1. html中：
    　　　　　　　<div>
  2.                 <input type="radio" name="paixu" id="paixu1" checked>
  3.                 <label for="paixu1" style="cursor:pointer">按热门排序</label>
  4.                 <input type="radio" name="paixu" id="paixu2">
  5.                 <label for="paixu2" style="cursor:pointer">按时间排序</label>
  6.                 <input type="radio" name="paixu" id="paixu3">
  7.                 <label for="paixu3" style="cursor:pointer">按评价排序</label>
  8.             </div>

2、设置input的display属性为none，将比较丑的那个框去掉。然后用伪元素添加相应的框。即在label中，用::before添加一个空心圆圈。

  1. div>input{
  2.     display: none;
  3. }
  4. div>label{
  5.     position: relative;
  6.     margin-right: 34px;
  7. }
  8. div>label::before{
  9.     display: inline-block;
  10.     content: "";
  11.     width: 16px;
  12.     height: 16px;
  13.     border-radius: 50%;
  14.     border: 1px solid rgb(219, 219, 219);
  15.     margin-right: 6px;
  16.     vertical-align: bottom;
  17. }

3、在input单选框在选中的时候，原有before的单选框变为红色实心框，同时添加label::after为白色圆，并将其定位到before的红色实心框中间。从而达到重叠的效果，实现红色圆框+白色圆心的效果。

  1. div>input:checked+label::before{
  2.     background-color: rgb(239, 66, 56);
  3. }
  4. div>input:checked+label::after{
  5.     display: inline-block;
  6.     content: "";
  7.     width: 6px;
  8.     height: 6px;
  9.     border-radius: 50%;
  10.     position: absolute;
  11.     left: 6px;
  12.     bottom: 6px;
  13.     background-color: white;
  14. }

　　是不是挺简单的呢？通过这样的方法还可以设置很多样式呢。

完整代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9. <style>
  10. div>input{
  11.     display: none;
  12. }
  13. div>label{
  14.     position: relative;
  15.     margin-right: 34px;
  16. }
  17. div>label::before{
  18.     display: inline-block;
  19.     content: "";
  20.     width: 16px;
  21.     height: 16px;
  22.     border-radius: 50%;
  23.     border: 1px solid rgb(219, 219, 219);
  24.     margin-right: 6px;
  25.     vertical-align: bottom;
  26. }
  27. div>input:checked+label::before{
  28.     background-color: rgb(239, 66, 56);
  29. }
  30. div>input:checked+label::after{
  31.     display: inline-block;
  32.     content: "";
  33.     width: 6px;
  34.     height: 6px;
  35.     border-radius: 50%;
  36.     position: absolute;
  37.     left: 6px;
  38.     bottom: 6px;
  39.     background-color: white;
  40.  
  41. }
  42. </style>
  43. </head>
  44. <body>  
  45.             <div>
  46.                 <input type="radio" name="paixu" id="paixu1" checked>
  47.                 <label for="paixu1" style="cursor:pointer">按热门排序</label>
  48.                 <input type="radio" name="paixu" id="paixu2">
  49.                 <label for="paixu2" style="cursor:pointer">按时间排序</label>
  50.                 <input type="radio" name="paixu" id="paixu3">
  51.                 <label for="paixu3" style="cursor:pointer">按评价排序</label>
  52.             </div>
  53. </body>
  54.  
  55. </html>

　　

 

版权声明：本文为zhangzhiyong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zhangzhiyong/p/9581110.html