zoukankan      html  css  js  c++  java
  • vue 单选框自定义


    <div>
    <div>
    <button @click="show=!show">show</button>
    <transition name="v">
    <div>
    <div class="female">
    <input type="radio" id="female" name="sex" class="input"/>
    <label for="female" class="label">女</label>
    </div>
    <div class="male">
    <input type="radio" id="male" name="sex" class="input"/>
    <label for="male" class="label">男</label>
    </div>
    </div>
    </transition>
    </div>
    </div>
    <style>
    .input{display:none;}
    .label:before{ content: "a0"; /*不换行空格*/
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    1em;
    height: 1em;
    margin-right: .4em;
    border-radius: 50%;
    border: 1px solid #01cd78;
    text-indent: .15em;
    line-height: 1; }
    .input:checked + .label:before{
    background-color: #01cd78;
    background-clip: content-box;
    padding: .1rem;
    }

    </style>
  • 相关阅读:
    编写SASS代码
    表单
    动画和变形
    图片多媒体
    基本概念
    弹性布局
    HTML和CSS概述
    页面的制作过程
    盒子定位体系
    css盒子
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/12797807.html
Copyright © 2011-2022 走看看