zoukankan      html  css  js  c++  java
  • input radio checkbox选中的c's's

    <form action="">
                <div class="brand">
                        <span>商标知识产权集团商标公证1</span>
                        <input type="radio" name="brand" value="man" id="man" >
                        <label for="man"></label>
                </div>
                <div class="brand ">
                        <span>商标知识产权集团商标公证2</span>
                        <input type="radio" name="brand" value="female" id="female" >
                        <label for="female"></label>
                </div>
                <div class="brand">
                        <span>商标知识产权集团商标公证3</span>
                        <input type="radio" name="brand" value="do" id="do" >
                        <label for="do"></label>
                </div>
                <div class="confirm-search"">
                        <button type="submit">查询</button>
                </div>
        </form>
    .brand{
            padding: 0 .24rem;
            height: .9rem;
            background: #fff;
            line-height: .9rem;
            font-size: .28rem;
            border-bottom:0.01rem solid #f2f2f2;
            position: relative;
            color:rgb(108,108,108);
        }
        .brand label{
            position: absolute;
                width: .4rem;
                height: .4rem;
                right: .24rem;
                top: 50%;
                line-height: .9rem;
                margin-top: -.2rem;     
        }
        .brand input[type="radio"]{
          display: none;
        }
        .brand input[type='radio']+label:before{
            content: '';
            display: inline-block;
            position: absolute;
            width: .4rem;
            height: .4rem;
            top: 50%;
            line-height: .9rem;
            margin-top: -.2rem;     
            background: url(../images/circle.png) no-repeat;
            background-size: 0.4rem 0.4rem;
        }
        .brand input[type='radio']:checked+label:before{
          background: url('../images/chose.png');
          background-position: center center;
        }

  • 相关阅读:
    【LeetCode】048. Rotate Image
    【LeetCode】036. Valid Sudoku
    【LeetCode】060. Permutation Sequence
    【LeetCode】001. Two Sum
    【LeetCode】128. Longest Consecutive Sequence
    【LeetCode】081. Search in Rotated Sorted Array II
    【LeetCode】033. Search in Rotated Sorted Array
    顺时针打印矩阵
    矩形覆盖
    二维数组中的查找
  • 原文地址:https://www.cnblogs.com/MR-cui/p/9663187.html
Copyright © 2011-2022 走看看