zoukankan      html  css  js  c++  java
  • radio样式的写法,单选和多选如何快速的改变默认样式,纯CSS,

    一。纯CSS写法改变单选框的默认选择样式,用背景图片代替

    input[type='radio']:radio:before {
    content: '';//这里需要有
    20px;
    height: 20px;
    display: inline-block;
    background-image: url(img/lzw_check.png);//你要改变的样式图片
    background-color: #2398f8;
    background-size: cover;
    border-radius: 10px;
    }

    因为ionic中的radio是完全是用初始化的样式的,理论上是同样适用的,暂时还未做尝试,博客持续更新

    二。还有一种是用JS代码来实现

    html

    <div>
      <input type="radio" id="nba" checked="checked" name="sport" value="nba">
      <label name="nba" class="checked" for="nba">NBA</label>
      <input type="radio" id="cba" name="sport" value="cba">
      <label name="cba" for="cba">CBA</label>
    </div>

    css

    input[type="radio"] {
      margin: 3px 3px 0px 5px;
      display: none;
    }
    label {
      padding-left: 20px;
      cursor: pointer;
      background: url(bg.gif) no-repeat left top;
    }
    label.checked {
      background-position: left bottom;
    }
    js
    $(function() { $('label').click(function(){ var radioId = $(this).attr('name'); $('label').removeAttr('class') && $(this).attr('class', 'checked'); $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked'); }); });
    这办法是别人打代码,自己没尝试过,附上地址链接

    https://segmentfault.com/q/1010000000521764
  • 相关阅读:
    mac下chrome快捷键,vscode快捷键
    css3 rgba()/opacity()
    sublime 将打字内容放在屏幕中央
    HDU 1427 速算24点【数值型DFS】
    HDU 1015 Safecracker【数值型DFS】
    HDU 2553 N皇后问题【棋盘型DFS】
    HDU 2660 Accepted Necklace【数值型DFS】
    2016中国大学生程序设计竞赛
    DFS之奇偶剪枝
    G
  • 原文地址:https://www.cnblogs.com/ChineseLiao/p/7410377.html
Copyright © 2011-2022 走看看