复选框、单选框的自定义样式

其他 2019-08-13 16:06:01 阅读次数: 0

---恢复内容开始---

　　在很多时候，浏览器自带的单选框和复选框的样式不够美观，并且浏览器的样式之间带有差异。已经不足以我们生产的需求。下面用css来自定义修改一下单选框与复选框的样式。

　　首先我们先看一下例子的效果：

　　

　　上图是我这边例子的效果图，最后会将整个代码贴在最后，以供参考。

  • 复选框自定义样式

　　复选框我们最经常遇到的问题，就是对号的样式多种多样，或者颜色多种。

　　这边自定义复选框样式的逻辑方法是：清楚复选框原来的样式，重新定义input的样式以及选中情况下的样式，对号可以使用图片填充。

　　复选框html内容如下：

<input type="checkbox" id="checkbox1"><label for="checkbox1">123</label>
<input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>

　　上面复选框的样式如下：

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-appearance: none;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  outline: none;
}
input[type="checkbox"]:checked {
  background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
    no-repeat center;
  background-size: 100% 100%;
}

　　这里使用属性选择器选中复选框，appearance:none清除默认样式后重新设置样式。复选框被选中后使用图片填充。

  • 单选框自定义样式

　　单选框自定义逻辑方法：清除radio的默认样式，使用伪元素模拟单选框样式。

　　性别例子html内容如下：

<p>您的性别：</p>
    <div class="radio-sex">
        <input type="radio" id="sex1" name="sex">
        <label for="sex1"></label>
        <span>男</span>
    </div>
    <div class="radio-sex">
        <input type="radio" id="sex2" name="sex">
        <label for="sex2"></label>女
    </div>

　　css内容如下：

.radio-sex {
  position: relative;
  display: inline-block;
  margin-right: 12px;
}

.radio-sex input {
  vertical-align: middle;
  /* 前面三行代码是为了让radio单选按钮与文字对齐 */
  width: 20px;
  height: 20px;
  appearance: none; /*清楚默认样式*/
  -webkit-appearance: none;
  opacity: 0;
  outline: none;
  /* 注意不能设置为display:none*/
}

.radio-sex label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/
  width: 20px;
  height: 20px;
  border: 1px solid #3582e9;
  border-radius: 100%;
}

.radio-sex input[type="radio"]:checked + label {
  background: #3582e9;
}

.radio-sex input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 5px;
  height: 12px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}
.radio-sex span{
    vertical-align: middle;
}

　　单选框选中样式使用属性选择器、:checked选择器、相邻兄弟选择器和伪元素完成。当被选中时，对号通过设置右边框和下边框通过旋转45度实现效果。

　　其他关于颜色和数字的单选框样式和上边的例子差不多。

　　数字例子里面右下角的小对号是我通过引入阿里矢量库里面的icon实现的。

　　下面贴上整个代码以供参考：

<template>
    <div class="main">
        <div class="div">123</div>
        <input type="checkbox" id="checkbox1"><label for="checkbox1">123</label>
        <input type="checkbox" id="checkbox2"><label for="checkbox2">23</label>
    <p>您的性别：</p>
    <div class="radio-sex">
        <input type="radio" id="sex1" name="sex">
        <label for="sex1"></label>
        <span>男</span>
    </div>
    <div class="radio-sex">
        <input type="radio" id="sex2" name="sex">
        <label for="sex2"></label>女
    </div>
    <p>喜欢的颜色：</p>
    <div class="radio-label">
        <input type="radio" id="color1" name="color">
        <label for="color1">蓝色</label>
    </div>
    <div class="radio-label">
        <input type="radio" id="color2" name="color">
        <label for="color2">红色22</label>
    </div>
    <div class="radio-label">
        <input type="radio" id="color3" name="color">
        <label for="color3">绿色333</label>
    </div>
    <span class="iconfont" style="color: red"></span>
    <p>喜欢的数字：</p>
    <div class="radio-check">
        <input type="radio" id="num1" name="num" :checked="num=='num1'" @click="num='num1'">
        <label for="num1">一1</label>
        <span class="iconfont iconq"></span>
    </div>
    <div class="radio-check">
        <input type="radio" id="num2" name="num" :checked="num=='num2'" @click="num='num2'">
        <label for="num2">二222222</label>
        <span class="iconfont iconq"></span>
    </div>
    <div @click="write()">点我输出你喜欢的数字：{{num}}</div>
    </div>
</template>
<script>
export default {
    name: 'input-component',
    data() {
        return {
            num:'num1'
        }
    },
    methods:{
        write(){
            
            console.log(this.num)
        }
    }
}
</script>
<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 1313406 */
  src: url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.eot');
  src: url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.woff') format('woff'),
  url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1313406_8rrf66s2gx.svg#iconfont') format('svg');
}
.main{
    padding:20px;
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p{
    margin: 15px 0;
}
.div:before {
  content: url(http://www.w3school.com.cn/i/w3school_logo_white.gif);
}
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  background-color: #fff;
  -webkit-appearance: none;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  outline: none;
}
input[type="checkbox"]:checked {
  background: url("https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=5bc58607708b4710da22f59ea2a7a898/622762d0f703918f418843ec533d269759eec4bf.jpg")
    no-repeat center;
  background-size: 100% 100%;
}
.radio-sex {
  position: relative;
  display: inline-block;
  margin-right: 12px;
}

.radio-sex input {
  vertical-align: middle;
  /* 前面三行代码是为了让radio单选按钮与文字对齐 */
  width: 20px;
  height: 20px;
  appearance: none; /*清楚默认样式*/
  -webkit-appearance: none;
  opacity: 0;
  outline: none;
  /* 注意不能设置为display:none*/
}

.radio-sex label {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/
  width: 20px;
  height: 20px;
  border: 1px solid #3582e9;
  border-radius: 100%;
}

.radio-sex input[type="radio"]:checked + label {
  background: #3582e9;
}

.radio-sex input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 2px;
  width: 5px;
  height: 12px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}
.radio-sex span{
    vertical-align: middle;
}
/* 喜欢的颜色 */
.radio-label,
.radio-check {
  display: inline-block;
  position: relative;
}
.radio-label input[type="radio"] {
  appearance: none; /*清楚默认样式*/
  -webkit-appearance: none;
  /* opacity: 0; */
  outline: none;
  position: absolute;
  z-index: 2;
  width: 6px;
  height: 6px;
  top: 10px;
  left: 10px;
  border-radius: 50%;
  background: #b4b4b4;
}
.radio-label label {
  display: inline-block;
  min-width: 50px;
  height: 24px;
  line-height:24px;
  text-align: center;
  padding-right: 10px;
  border-radius: 5px;
  padding-left: 25px;
  color: #fff;
  background-color: #c9c9c9;
}
.radio-label input[type="radio"]:checked {
  opacity: 0;
}
.radio-label input[type="radio"]:checked + label {
  color: #fff;
  background-color: #3597db;
}
.radio-label input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 5px;
  width: 5px;
  height: 12px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}
.iconq {
  font-size: 25px;
  position: absolute;
  right: -11px;
  bottom: -11px;
  z-index: 1;
  opacity: 0;
}

/* 喜欢的数字 */
.radio-check input[type="radio"] {
  appearance: none; /*清楚默认样式*/
  -webkit-appearance: none;
  /* opacity: 0; */
  outline: none;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: #b4b4b4;
}
.radio-check input[type="radio"] {
  opacity: 0;
}
.radio-check label {
  display: inline-block;
  /* min-width: 50px; */
  height: 24px;
  line-height: 24px;
  text-align: center;
  padding-right: 10px;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  padding-left: 10px;
  cursor: pointer;
}
.radio-check input[type="radio"]:checked + label + span {
  color: #3597db;
  opacity: 1;
}
.radio-check input[type="radio"]:checked + label {
  border-color: #3597db;
}
.radio-check input[type="radio"]:hover + label {
  border-color: #3597db;
}
</style>

　　当然也还是有其他办法，通过动态绑定class也可以模拟单选框选中的样式。

　　以上代码以测试成功，欢迎留言。

猜你喜欢

转载自www.cnblogs.com/freedom-feng/p/11346396.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022