如何改写原生input type="radio"的样式

最新推荐文章于 2024-07-29 09:25:14 发布

冯冯墨墨

最新推荐文章于 2024-07-29 09:25:14 发布

阅读量4.3k

点赞数 1

文章标签： input textarea

本文链接：https://blog.csdn.net/qq_33072593/article/details/80613355

版权

默认的radio样式：

这里写图片描述

需要实现的效果：

这里写图片描述

<html lang="zh-CN">
<head>
</head>
<body>
  <div class="input_radio">
    <input type="radio" name="item" value="男生">
    <label>男生</label>
  </div>
  <div class="input_radio">
    <input type="radio" name="item" value="女生">
    <label>女生</label>
  </div>
</body>
</html>

// 默认写的是scss文件，直接复制运行不生效的，请自行转换成css样式
.input_raido {
  position: relative;
  line-height: 30px;

  input[type="radio"] {
    width: 70px;

    // 这里把默认的圆点透明度设置为0，并且把 label 标签的层级设置成高于默认的radio层级
    opacity: 0;
  }
  label {
    position: absolute;
    left: 0;
    width: 60px;
    height: 25px;
    line-height: 25px;
    text-align: center;

    // 点击显示成绿色部分，其实是radio的部分，只不过对radio进行了透明处理而已。
    z-index: -1;
    background-color: #eee;
    border-radius: 50px;
    color: #333;
 }
  /*设置选中的input的样式*/
  /* + 是兄弟选择器,获取选中后的label元素*/
  input:checked+label { 
   background-color: #6ad33b;
   border-radius: 50px;
   color: white;
  }
}

注：
既然说到了input的部分，我就顺便再提几个关于input / textarea 的小知识点：

1、如何去除手机客户端上textarea input 文本标签的上阴影边框：
解决方法（下面以textarea为例：）：

textarea {
  -webkit-appearance: none;
}

2、如何更改input、textarea框中placeholder的文字颜色；

// 解决方法（下面以 textarea 为例，更改textarea中placeholder中的颜色为#ccc）：
textarea::-webkit-input-placeholder {
  color: #ccc;
}
textarea::-moz-placeholder {
  color: #ccc;
}
textarea:-ms-input-placeholder {
  color: #ccc;
}