修改手机端radio 样式

实现手机端radio样式修改

http://www.iconfont.cn/搜索对勾图片和圆圈图,分别命名为radio.png 和 select.png

填写自己要的颜色,点击下载png,一般人都会

   <span class="address-radio checked"></span>
    <input type="radio" name="address" class="hide">
    .address-radio {
            display: block;
            width: 2rem;
            height: 2rem;
            margin: 0 auto;
            background: url(../../assets/images/radio.png) no-repeat 0px 1px;
            background-size: 100% 100%
        }

        .address-radio.checked {
            background: url(../../assets/images/select.png) no-repeat 0px 1px;
            background-size: 100% 100%
        }
     .hide {
        display:hidden
        }
$(".address-radio").click(function () {
        $(".address-radio").removeClass("checked");
        $(this).toggleClass("checked");
        $(this).next().prop(‘checked‘, ‘true‘);
    });

代码很简单

时间: 2024-10-24 13:08:37

修改手机端radio 样式的相关文章

destoon修改手机端分页

1. global.func.php pages函数和listpages函数 函数开头增加 $DT_TOUCH,$newsamplepages变量 global $DT_URL, $DT, $L,$DT_TOUCH,$newsamplepages; 函数最后 include DT_ROOT.'/api/pages.'.((!$DT['pages_mode'] && $page < 100) ? 'default' : 'sample').'.php';改成 if($newsample

利用css3修改input[type=radio]样式

<form> <div> <input id="item1" type="radio" name="item" value="选项一" checked> <label for="item1"></label> <span>选项一</span> </div> <div> <input id=&qu

手机端radio控件 ios效果

一.CSS代码如下:    .switch {      position: relative;      margin: 20px auto;      height: 26px;      width: 120px;      background: rgba(0, 0, 0, 0.25);      border-radius: 3px;      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 25

整理:手机端网页调试方案

(本文前身是技术分享的ppt,因此有些图直接是ppt导出的.画的图全是原创,转载请注明,谢谢.) 在手机端网页开发的特定阶段,需要查看手机端的界面.交互与体验.2011年时,开发时有很大麻烦: 相应的静态文件在测试服务器上,没有上线,需要绑定hosts而手机端直接绑定hosts是需要越狱/root的 有的手机浏览器根本不认hosts文件,如uc 手机端的调试工具匮乏断点调试.查看变量.查看样式等都很困难 在电脑端改变UA和屏幕大小,并不能简单的模拟手机端的情形.比如触摸的事件处理 在2012年后

简单两步让博客园支持手机端显示

博客园的模板是没有兼容手机端显示的,阅读体验比较差.本文教你如何简单几步让你的博客支持手机端显示.找一个夜深人静,没有人浏览你博客的时间点,开始吧. 1.添加js代码 在博客园后台的“设置”菜单下,有一项页首Html代码,此处写js代码也是可以生效的,将如下代码复制过去: <script> var content = 'width=device-width, initial-scale=1 user-scalable=no'; var viewport = document.createEle

whistle——真机移动端页面调试【查看、修改真机端的页面DOM结构及样式】

1.查看.修改真机端的页面DOM结构及样式[参考——https://imweb.io/topic/5981a34bf8b6c96352a59401]: 1.0.需要配置的rule——域名 weinre://随便某个分类命名[如:wq.jd.com weinre://test2——test2只是作为weinre的分类,防止一个weinre调试页面出现太多的连接]: 1.1.真机上访问某个页面,如访问微信下的发现>购物页面: 1.2.点击weinre下的,刚创建的分类test2,跳到http://1

【前端】input radio多选事件获取所有选中的id,radio样式优化可修改

$("#all_button").on('click', function() { obj = document.getElementsByClassName("input_radio_checked"); str = ""; for(i = 0; i < obj.length; i++) { str += obj[i].id + " "; //这里是数字之间的空格 } console.log(str) alert(st

手机端 — 点击图片全屏查看

在公众号中提交服务需求工单后,经过"待分配"."待执行"."执行中"."待验收" 这些阶段后,需要验收人提交评论上传图片才能变成"已完成". 做好后新增点击图片全屏查看的需求,刚开始使用的方法能够做到,但是由于 jquery 的版本冲突,所以不得已换了现在的方法. <div class="add_photo" style="margin-top: 1000px;"

Erdaicms旅游网站系统微信和手机端分销系统正式上线发布啦

为了便于营销,Erdaicms特别内置了2级分销系统,每个分销商都可以拥有自己的网店,销售订单获得提成,分销商网店和平台数据实时互通.无需国外的设置和维护,专注于销售. 详细请仔细阅读研究下面的分销商流程和说明图: 重要知识点: 一.分销商账户通过那几种途径获得?1.管理员直接从平台后台开设全新的账户.2.管理员从平台后台中,选取已经存在的普通会员账户,提升权限为分销商.3.直接从前台专门的注册页面注册,管理员后台审核. 二.分销商的店铺产品数据从哪里来1.分销商的店铺相当于直接把平台的移动站复