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
  • 相关阅读:
    iPhone开发教程之retain/copy/assign/setter/getter
    关于block使用的5点注意事项
    Block的引用循环问题 (ARC & non-ARC)
    浅谈iOS中MVVM的架构设计与团队协作
    JS学习笔记(不断更新)
    神经网络介绍
    JAVA WEB WITH IDEA
    百度地图标注多个点
    脑筋急转弯——Google 面试
    决策树分类器
  • 原文地址:https://www.cnblogs.com/ChineseLiao/p/7410377.html
Copyright © 2011-2022 走看看