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
  • 相关阅读:
    C#中的Dictionary字典类介绍
    SQL server 2008r2 file is corrupt
    web service接口 wsdl和asmx有什么区别
    ascx
    C++: C++函数声明的时候后面加const
    C++三种野指针及应对/内存泄露
    C++构造和析构的顺序
    atan2()如何转换为角度
    C++11左值引用和右值引用
    C++ STL详解
  • 原文地址:https://www.cnblogs.com/ChineseLiao/p/7410377.html
Copyright © 2011-2022 走看看