zoukankan      html  css  js  c++  java
  • 美化单选框和复选框

    技术要点:主要运用伪类选择器:checked,设置单选或复选按钮选中时的样式,加号'+'相邻兄弟选择器,选中后面的兄弟节点

    单选框样例:

    css代码:background-clip规定背景的绘制区域,值为content-box表示背景被裁剪到内容框

    label{margin-right:50px;}
    .circle{display:inline-block;vertical-align:middle;15px;height:15px;border-radius:50%;border:1px solid #ddd;}
    input[type='radio']:checked+.circle{padding:2px;background:red;box-sizing:border-box;border-color:red;background-clip:content-box;}

    html代码:

    <label><input type="radio" hidden name="sex" checked="checked">
        <span class="circle"></span>
    </label>
    <label><input type="radio" hidden name="sex">
        <span class="circle"></span>
    </label>

    效果图:

    复选框样例:

    css:

    label{margin-right:50px;}
    .square{display:inline-block;vertical-align:middle;width:15px;height:15px;border-radius:5px;border:1px solid #ddd;}
    input[type='checkbox']:checked+.square:after{content: '✓';font-size: 16px;font-weight: bold;line-height: 15px;display: block;color:green;}

    html:

    <label>
        篮球
        <input type="checkbox" hidden >
        <span class="square"></span>
    </label>
    <label>
        足球
        <input type="checkbox" hidden >
        <span class="square"></span>
    </label>

    效果图:

  • 相关阅读:
    表单传文件值读取不到
    tomacat启动慢
    finder文件目录跳转快捷键
    ziparchiver添加后编译出错
    mjrefresh源码分析
    Code Sign error: No unexpired provisioning profiles found that contain any of the keychain's signing certificates
    java web学习
    Java HashMap
    Java Convert String to Binary
    Java ArrayList Class
  • 原文地址:https://www.cnblogs.com/hesj/p/10535614.html
Copyright © 2011-2022 走看看