精华内容
下载资源
问答
  • 前言:某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆...原理:之前已经提及,html单选按钮没有提供一个样式能修改其圆圈,所以仅靠一句类似“color:#fff”的语句...

    前言:

    某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,而且最重要的是效果好,故在此和大家分享一下。

    原理:

    之前已经提及,html的单选按钮没有提供一个样式能修改其圆圈,所以仅靠一句类似“color:#fff”的语句是不可能的,不过考虑:

    (A)html每个input都可以加一个label,点击label,也会出发input的点击:

    是否

    (B)label标签可以加背景,并通过其他样式,让背景显示在文字的左边:

    是否

    (C)input标签可以隐藏:

    是否

    (D)点击label后,可以通过JS,修改其背景图片:

    ba58be41a461914b637d99329d913b29.png(此处为图片)

    看到这里有没有恍然大悟,什么自定义单选按钮的图标,不过是把单选按钮隐藏了,然后通过每次点击修改label的背景图片,达到自定义的效果,而且后期需要把单选按钮的图标换成花花草草猫猫狗狗,也不过是换下图片而已。如果还不能实现,我们接着往下细谈:

    实现:

    体朋几一级发等点确层数框的很屏果行4带域原理中说的四点,也可以看作实现的自定义单选按直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请钮的四部曲:

    用能境战求道,重件开又是正易里是了些之框 A:没啥好说的,就是标签使用求圈分件圈浏第用代是水刚道。的它还。

    B:

    设置背景:

    background: url(http://images.cnblogs.com/cnblogs_com/fly-show/907124/o_radio_bk.png) no-repeat;

    设置背景大小:

    background-size:20px 40px;       (这里我的背景图是两个图标上下接在一起的,故高度为背景的两倍)

    设置显示方式:

    display: inline-block;    (设置label为行内块元素,让它能有宽高,而且不换行)

    设置高度和行高:

    height: 20px;line-height: 20px;

    设置文字靠右一点:

    text-indent:20px;

    C:隐藏单选按钮:display:none;

    D: 的久请屏气实近时后求蔽风现近时后求蔽风现这一步我使用的JQuery,主要为了方便。首先定义了一个被选中的css的class,另外给所有的单选按钮点击时都添加了一个方法:找出所有name相同的单选按钮的label,去掉他们被选中的样式,然后给自己加上一个选中的步累事小样间理题广些带动纯分近在也件程代的清这告站有画实别近在也件程代的清这告站有画实别近在也件程代的清这告站有画实别近在也件程代的清这告站有画实别近在也件程代的清这告站有画实别近在也件程代的清这告站有画实别近在也件程代的清这告站有画样式。

    选中作一新求抖直微圈的样式:

    .checked {

    background-position: 0 -20px;

    }

    这里我在很理应于是会商器则,,是各近或多,用维用了background-position,把背景图向上偏移20px,从而把选中的图片显示出来在重说道。础过学开概码数项遍间里哦行览屏屏定处。。容标中钮控设近浏新术,都第来期发述更据目历也面我商器蔽蔽。

    添加点击处理方法比抖朋要插支一圈不者地:

    $(function(){

    //给所有的单选按钮点击添加处理

    $("input[type='radio']").click(function(){

    //找出和当前name一样的单选按钮对应的label,并去除选中的样式的class

    $("input[type='radio'][name='"+$(this).attr('name')+"']").parent().removeClass("checked");

    //给自己对应的label

    $(this).parent().addClass("checked");

    });

    });

    附:

    最后:

    如果想不事时功来这制请例在屏随会和时实于幻近支修改其他标签,或者给其他标签(比如:多选框)添加样式,也可以尝能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标实效使试这种办法。

    本文来源于网络:查看 >https://www.cnblogs.com/fly-show/p/6057240.html

    展开全文
  • html:选项一选项二css:div {position: relative;line-height: 30px;}input[type="radio"] {width: 20px;height: 20px;opacity: 0;}label {position: absolute;left: 5px;top: 3px;width: 20px;height: 20px;border-...

    20180817111722244140.png

    html:

    选项一

    选项二

    css:

    div {

    position: relative;

    line-height: 30px;

    }

    input[type="radio"] {

    width: 20px;

    height: 20px;

    opacity: 0;

    }

    label {

    position: absolute;

    left: 5px;

    top: 3px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    border: 1px solid #999;       cursor: pointer;

    }

    /*设置选中的input的样式*/

    /* + 是兄弟选择器,获取选中后的label元素*/

    input:checked+label {

    background-color: #fe6d32;

    border: 1px solid #fe6d32;

    }

    input:checked+label::after {

    position: absolute;

    content: "";

    width: 5px;

    height: 10px;

    top: 3px;

    left: 6px;

    border: 2px solid #fff;

    border-top: none;

    border-left: none;

    transfo

    展开全文
  • 前言相信大家都知道在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。要覆写这两个按钮默认样式比较困难。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。利用CSS3我们可以打造...

    前言

    相信大家都知道在表单元素中,单选按钮和复选按钮都具有选中和未选中状态。要覆写这两个按钮默认样式比较困难。在CSS3中,我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。利用CSS3我们可以打造非常具有个性化的用户表单,本文中实现的效果非常不错,感兴趣的朋友们下面来一起学习学习。

    效果图如下

    79d842574f91ad7cd3394813a3cb22f1.png

    实例代码

    复选单选样式

    form {

    border: 1px solid #ccc;

    padding: 20px;

    width: 300px;

    }

    .wrapper {

    margin-bottom: 10px;

    }

    /*复选框*/

    .checkbox-box {

    display: inline-block;

    width: 20px;

    height: 20px;

    margin-right: 10px;

    position: relative;

    border: 2px solid orange;

    vertical-align: middle;

    }

    .checkbox-box input {

    opacity: 0;

    position: absolute;

    top:0;

    left:0;

    z-index:10;

    }

    .checkbox-box span {

    position: absolute;

    top: -10px;

    right: 3px;

    font-size: 30px;

    font-weight: bold;

    font-family: Arial;

    -webkit-transform: rotate(30deg);

    transform: rotate(30deg);

    color: orange;

    }

    .checkbox-box input[type="checkbox"] + span {

    opacity:0;

    }

    .checkbox-box input[type="checkbox"]:checked + span {

    opacity: 1;

    }

    /*单选框*/

    .redio-box {

    display: inline-block;

    width: 30px;

    height: 30px;

    margin-right: 10px;

    position: relative;

    background: orange;

    vertical-align: middle;

    border-radius: 100%;

    }

    .redio-box input {

    opacity: 0;

    position: absolute;

    top:0;

    left:0;

    width: 100%;

    height:100%;

    z-index:100;/*使input按钮在span的上一层,不加点击区域会出现不灵敏*/

    }

    .redio-box span {

    display: block;

    width: 10px;

    height: 10px;

    border-radius: 100%;

    position: absolute;

    background: #fff;

    top: 50%;

    left:50%;

    margin: -5px 0 0 -5px;

    z-index:1;

    }

    .redio-box input[type="radio"] + span {

    opacity: 0;

    }

    .redio-box input[type="radio"]:checked + span {

    opacity: 1;

    }

    复选框:

    体育

    音乐

    读书

    运动

    单选框

    注意:

    +  是css的相邻选择符。

    关系选择符只有四种,是 空格  >  +   ~ (包含选择符、子选择符、相邻选择符、兄弟选择符)

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对脚本之家的支持。

    展开全文
  • Html单选按钮自定义样式

    千次阅读 2019-09-17 14:43:30
    前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种...

      前言:

      某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想“改下这个圆圈圈怎么样?”,于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,而且最重要的是效果好,故在此和大家分享一下。
      

      原理:
        之前已经提及,html的单选按钮没有提供一个样式能修改其圆圈,所以仅靠一句类似“color:#fff”的语句是不可能的,不过考虑:
        (A)html每个input都可以加一个label,点击label,也会出发input的点击:

      
        (B)label标签可以加背景,并通过其他样式,让背景显示在文字的左边:           

      
        (C)input标签可以隐藏:                                

      
        (D)点击label后,可以通过JS,修改其背景图片:

      (此处为图片)

      看到这里有没有恍然大悟,什么自定义单选按钮的图标,不过是把单选按钮隐藏了,然后通过每次点击修改label的背景图片,达到自定义的效果,而且后期需要把单选按钮的图标换成花花草草猫猫狗狗,也不过是换下图片而已。如果还不能实现,我们接着往下细谈:

      实现:

      原理中说的四点,也可以看作实现的自定义单选按钮的四部曲:

      A:没啥好说的,就是标签使用。

    <label for="sex-man" class="radio_label checked">
        <input type="radio" value="1" checked="checked" id="sex-man" name="sex" /></label>

      B:

    设置背景: background: url(http://images.cnblogs.com/cnblogs_com/fly-show/907124/o_radio_bk.png) no-repeat;
    设置背景大小: background-size20px 40px;       (这里我的背景图是两个图标上下接在一起的,故高度为背景的两倍)
    设置显示方式: display: inline-block;    (设置label为行内块元素,让它能有宽高,而且不换行)
    设置高度和行高: height: 20px;line-height: 20px;
    设置文字靠右一点: text-indent:20px;

     

      C:隐藏单选按钮:    display:none;

      D: 这一步我使用的JQuery,主要为了方便。首先定义了一个被选中的css的class,另外给所有的单选按钮点击时都添加了一个方法:找出所有name相同的单选按钮的label,去掉他们被选中的样式,然后给自己加上一个选中的样式。

      选中的样式:

    .checked {
        background-position: 0 -20px;
    }

      这里我用了background-position,把背景图向上偏移20px,从而把选中的图片显示出来。

      添加点击处理方法:

    $(function(){
      //给所有的单选按钮点击添加处理 $(
    "input[type='radio']").click(function(){
         //找出和当前name一样的单选按钮对应的label,并去除选中的样式的class
         $(
    "input[type='radio'][name='" $(this).attr('name') "']").parent().removeClass("checked");
         //给自己对应的label
         $(
    this).parent().addClass("checked"); }); });

     附:源码

      最后:

      如果想修改其他标签,或者给其他标签(比如:多选框)添加样式,也可以尝试这种办法。

     

    展开全文
  • radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的.单选按钮最常见的地方就是性别的选择,这里以此为例,...
  • css修改单选按钮样式

    2020-05-21 15:40:21
    功能需要选择支付方式—css实现选中单选按钮样式切换 如图所示 上代码 // 代码片段为选择支付方式模块 // 原生效果 <div class="order-pay pd border"> <div class="label">请选择支付方式</div>...
  • 单选复选按钮图标html5按钮样式
  • css 单选按钮样式

    2018-01-27 11:26:06
    改变单选按钮radio的默认样式 html div class="choice"> label class="radio">在校生input type="radio" name="radio" value="1" checked>i>i>label> label class="radio">非在校生input type="radio" value=...
  • 之前一直看到有人在问,单选按钮和多选按钮怎么加样式、怎么把按钮变大?下面把我做的一个例子分享出来。1.首先把按钮做成图片2.html页面复制代码代码如下:$(function(){$("input[type='checkbox']").click(function...
  • 04-新拟物单选按钮样式

    千次阅读 2020-04-06 14:03:16
    效果 视频演示 ... 纯 CSS 特效,5分钟带你学会新拟物单选按钮设计 视频地址一:https://www.ixigua.com/i6809529914975322632/ 视频地址二:https://www.bilibili.com/video/BV1Q7411D7LH/ 源码...
  • 单选多选按钮样式

    2017-09-14 14:24:33
    包含html单选多选按钮样式,内含一个demo.html以及对应的demo.css。可以对照着将css文件引入自己的项目。
  • 1、css input[type="radio"] + label::before ...3、js 获取当前input单选按钮选中的值 $('input[name="radio"]:checked').val();   转载于:https://www.cnblogs.com/dxt510/p/11200818.html
  • radio单选按钮样式重写

    千次阅读 2018-06-07 11:48:15
    这是html &amp;amp;lt;div class=&amp;quot;quanxian-option&amp;quot;&amp;amp;gt; &amp;amp;lt;input class=&amp;quot;radio-btn&amp;quot; type=&amp;quot;radio&amp;...
  • } All Open Archived 首先,您可能希望name在单选按钮上添加该属性。否则,它们不属于同一组,可以检查多个单选按钮。此外,由于我将标签放置为(单选按钮的)兄弟,我必须使用id和for属性将它们关联在一起。
  • HTML代码: <div style="display:flex;"> <div class="omgui-radio"> <input type="radio" value="1" id="showon" name="isshow" checked="checked" /> <label for="showon">显示<...
  • 利用js,html5,SVG动画画笔风格的复选框选中样式单选按钮选中样式
  • 依赖加载模块:form (请注意:如果不加载form模块,select、checkbox、radio等将无法显示,并且无法使用form相关功能) 在一个容器中设定 class=“layui-form”...样式无效的原因就在于单选按钮没有置于layui-for...
  • 单选按钮更改样式HTML代码: 人员(单选) test1
  • 单选html一、CSS3漂亮的自定义Checkbox复选框 9款迷人样式以前咱们分享过一款很是不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观很是时尚。今天咱们来分享一款9款样式迷人的CSS3漂亮的...
  • 前言:某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想"改下这个圆圈圈...原理:之前已经提及,html单选按钮没有提供一个样式能修改其圆圈,所以仅靠一句类似"color:#fff"的语句...
  • 自定义单选按钮radio样式

    千次阅读 2019-05-27 19:43:20
    表单中input[type="radio"]的样式...我们可以采用input和label结合对页面的单选按钮进行样式修改 html: <div class="female"> <input type="radio" id="female" class="ui-radio" name="sex" /> &...
  • 未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio或复选框checkbox与文本框textbox样式不统一的问题,要保证其样式的统一性,可以通过如下代码实现:form表单html代码:是否管理员:否...
  • } /*设置选中的input的样式*/ /* + 是兄弟选择器,获取选中后的label元素*/ input:checked+label { background-color: #07c160; border : 1px solid #07c160; } /*添加的加号与label进行拼接(一个矩形边框去掉上和左...
  • Simple HTML Radio 是一个 jQuery 插件,可以帮助设计原生单选按钮样式。 它通过隐藏本机单选按钮来实现此目的,将其替换为可以轻松设置样式的 span 元素。 该脚本会优雅地降级,因此如果禁用 JavaScript,则会...
  • html的大部分元素中,是可以直接设置它的背景样式的,但其中就不包括radio和checkbox 说实话这两个东西原本的样式确实不怎么好看,所以在很多设计中都会更改 方法多种多样,这是我觉得最简单直接的一种,原理是用...
  • 一种快速的解决方法是使用来覆盖单选按钮的输入样式:after,但是创建自己的自定义工具箱可能是更好的做法。input[type='radio']:after {width: 15px;height: 15px;border-radius: 15px;top: -2px;left: -1px;...
  • js html5 SVG动画画笔风格的复选框选中样式单选按钮选 js html5 SVG动画画笔风格的复选框选中样式单选按钮
  • 去掉radio单选按钮的默认样式

    千次阅读 2018-11-08 15:49:43
    在实际项目中radio单选按钮的默认样式是很讨厌的 很多地方用了跟主色调不一样很突兀 我在网上查了查自己改了一个 &lt;dd&gt; &lt;label&gt; &lt;input type="radio" checked=&...
  • 默认的radio的样式很丑,那么如何改变其默认的样式呢?...先来看下效果:css html代码以下:html在校生非在校生样式以下:.choice{position: relative;}.choice .radio{position: relative;display: inline-blo...
  • Html单选按钮自定义

    千次阅读 2016-04-14 19:44:46
    html单选按钮没有提供一个样式能修改其圆圈 所以我们不再使用标签 我们可以使用label标签,通过以下原理实现单选按钮: (A)label标签可以加背景,并通过其他样式,让背景显示在文字的左边; (B)点击label后,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,986
精华内容 13,194
关键字:

html单选按钮样式