精华内容
下载资源
问答
  • input单选框
    千次阅读
    2020-02-18 16:37:28
    <label> <input type="radio" name="gender" value="male" /></label>
    <label> <input type="radio" name="gender" value="female" /></label>
    

    另一种写法:

    <input id="male" type="radio" name="gender" value="male" />
    <label for="male"></label>
    <input id="female" type="radio" name="gender" value="female" />
    <label for="female"></label>
    

    我们给单选框加了一个属性id=male,给lable标签也加了一个属性for=male。这样,两者之间就产生了一一对应的关系。

    更多相关内容
  • 方法一:给input添加-webkit-appearance: none;隐藏默认样式。然后添加自己的样式就好了。例如:.radioBox input{-webkit-appearance: none;width: 20px;height: 20px;padding: 0;background-color: #fff;border: 1...

    方法一:

    给input添加

    -webkit-appearance: none;

    隐藏默认样式。然后添加自己的样式就好了。

    例如:

    fcecaa27ea5212ceb9bf034c36bfbf34.gif

    .radioBox input{

    -webkit-appearance: none;

    width: 20px;

    height: 20px;

    padding: 0;

    background-color: #fff;

    border: 1px solid #c9c9c9;

    border-radius: 50%;

    outline: none;

    margin-right: 22px;

    cursor: pointer;

    }

    fcecaa27ea5212ceb9bf034c36bfbf34.gif

    选中时的样式:

    .radioBox input:checked{

    background: url(‘../img/checkBox_selected.png‘) no-repeat center;

    }

    效果:

    2df80e52d0dcd9372e36035dff91cfb8.png

    方法二:

    添加label,给label添加样式,隐藏input

    html:

    fcecaa27ea5212ceb9bf034c36bfbf34.gif

    fcecaa27ea5212ceb9bf034c36bfbf34.gif

    css

    fcecaa27ea5212ceb9bf034c36bfbf34.gif

    .radioBox input{

    display: none;

    }

    .radioBox label{

    cursor: pointer;

    position: relative;

    }

    .radioBox label::before{

    display: inline-block;

    content: "";

    width: 16px;

    height: 16px;

    border-radius: 50%;

    border: 2px solid rgba(193, 200, 211, 1);

    margin-right: 6px;

    vertical-align: middle;

    }

    /* 选中 */

    .radioBox input:checked+label::after{

    display: inline-block;

    content: "";

    width: 12px;

    height: 12px;

    border-radius: 50%;

    position: absolute;

    left: 4px;

    bottom: 4px;

    background-color: rgba(56, 85, 127, 1);

    }

    fcecaa27ea5212ceb9bf034c36bfbf34.gif

    效果:

    bf4ea4f9c4b667079b2a60b6d70633fd.png

    展开全文
  • 自定义input单选框样式

    千次阅读 2019-05-16 14:51:57
    自定义input单选框样式 表单中input[type=“radio”]的样式在不同的浏览器中表现也不一样,如果直接对单选按钮设置样式的话,没有多少样式能够对单选按钮起作用。 为了用户体验或者需要更改单选按钮的样式可使用此...

    自定义input单选框样式

    表单中input[type=“radio”]的样式在不同的浏览器中表现也不一样,如果直接对单选按钮设置样式的话,没有多少样式能够对单选按钮起作用。
    为了用户体验或者需要更改单选按钮的样式可使用此方法:
    一般使用单选按钮会搭配<label>元素使用并将关联起来,可以为<label>元素添加生成伪元素,并基于单选按钮的状态来为其设置样式,并将真正的按钮隐藏

    1.一个基本的单选按钮

        <div>
            <input type="radio" id="girl" name="sex" />
            <label for="girl">女</label>
            <input type="radio" id="boy" name="sex" />
            <label for="boy">男</label>
        </div>
    

    此时的样式
    在这里插入图片描述
    2.生成一个伪元素,设置自己想要的样式

        <style>
            input[type="radio"]+label::before {
                content: "\a0";/*不换行空格*/
                display: inline-block;
                vertical-align: middle;
                font-size: 18px;
                width: 7px;
                height: 7px;
                margin: auto 5px;
                border-radius: 50%;
                border: 1px solid gray;
                padding: 4px;
            }
            /* 设置选中样式 */
            input[type="radio"]:checked+label::before {
                background-color: gray;
                background-clip: content-box;
                padding: 4px;
            }
        </style>
    

    添加以上代码后的样式
    在这里插入图片描述
    3.隐藏原来的单选按钮

            input[type="radio"] {
                position: absolute;
                clip: rect(0, 0, 0, 0);
            }
    

    效果为:
    在这里插入图片描述

    展开全文
  • input添加 -webkit-appearance: none; 隐藏默认样式。然后添加自己的样式就好了。 例如: .radioBox input{ -webkit-appearance: none; width: 20px; height: 20px; padding: 0; background-c...

    方法一:

    给input添加

    -webkit-appearance: none;

    隐藏默认样式。然后添加自己的样式就好了。

    例如:

    .radioBox input{
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        padding: 0;
        background-color: #fff;
        border: 1px solid #c9c9c9;
        border-radius: 50%;
        outline: none;
        margin-right: 22px;
        cursor: pointer;
    }

     

     选中时的样式:

    .radioBox input:checked{
        background: url('../img/checkBox_selected.png') no-repeat center;
    }

     

    效果:

     

    方法二:

    添加label,给label添加样式,隐藏input

    html:

    <div class="radioBox">
      <input type="radio" value="yes" name="reserve" id="radio_yes">
      <label for="radio_yes"></label>
      <input type="radio" value="no" name="reserve" id="radio_no">   <label for="radio_no"></label> </div>

    css

    .radioBox input{
       display: none;
    }
    .radioBox label{
        cursor: pointer;
        position: relative;
    }
    .radioBox label::before{
        display: inline-block;
        content: "";
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 2px solid rgba(193, 200, 211, 1);
        margin-right: 6px;
        vertical-align: middle;
    }
    /* 选中 */
    .radioBox input:checked+label::after{
        display: inline-block;
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 50%;
        position: absolute;
        left: 4px;
        bottom: 4px;
        background-color: rgba(56, 85, 127, 1);
    }

     

    效果:

    转载于:https://www.cnblogs.com/cff2121/p/11535494.html

    展开全文
  • 改变input单选框样式(变成圆)

    千次阅读 2019-11-09 09:28:07
    改变input单选框样式(变成圆) 1.清空默认样式(最重要) outline: none 清空单选框,点击时蓝色默认边框 -webkit-appearance: none 清空单选框默认边框 1、-moz代表firefox浏览器私有属性 2、-ms代表ie浏览器私有...
  • input单选框CheckBox对象参考:https://www.w3school.com.cn/jsref/dom_obj_checkbox.asp 获取选中值: 判断各选项是否选中: if(document.getElementById("reserve_yes").checked){ reserve=yes; } else ...
  • 就是:input单选框、复选框 点选不上问题、选不中问题? input单选框、复选框 点选不上问题、选不中问题 的效果图如下: 解决 input单选框、复选框 点选不上问题、选不中问题? 该问题引起的原因是:父元素的 点击...
  • input单选框改变选择

    千次阅读 2018-08-08 11:21:33
    input type="radio" name="numerical" value="price" /&gt; 值 &lt;input type="radio" name="numerical" value="scope" /&gt; 范围 js...
  • input单选框移动端样式

    千次阅读 2019-04-13 09:45:35
    input单选框 sex 男 女 提交 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019041309424997.png)
  • input单选框radio点击选中、取消选中

    千次阅读 2018-12-25 15:27:06
    &lt;input type="radio" onclick="if(this.c==1){this.c=0;this.checked=0}else this.c=1"&gt;
  • <input type="checkbox" id="cbtest" /> <label for="cbtest" class="check-box"></label> CSS /* Made by Jimmy Gillam */ html, body { padding: 0; margin: 0; background-color: #667788; ...
  • input type="radio" name="sex" id="male" checked="checked"> <label for="male">男</label> <input type="radio" name="sex" id="female"> <label for="female">女</label> ...
  • 自定义input复选框单选框的样式,使用图片替换input选框的原样式 效果 html标签代码 <input type="checkbox" name="${(op.id)!''}" class="pb-checkItem" id="checkbox${(op.id)!''}" οnchange=...
  • 纯CSS跟换input单选框图片

    千次阅读 2019-01-11 09:47:02
    &amp;...input type=&quot;radio&quot; name=&quot;sex&quot; value=&quot;&quot; checked=&quot;checked&quot; class=&quot;sex&quot; /&amp;gt;
  • 零基础学习Vue: 第8课 Vue中v-model指令 的input单选框、复选框: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script ...
  • 1.单选框需要注意的是,如果是属于一组的选项,那么 name 属性的值必须相同,才会有单选的效果。如上所示,性别中的男和女两个选项是属于一组的,要么选择男,要么选择女,上面两个 input 标签的 name 属性值都是 ...
  • 今天帮后端弄一个很古老的项目,要用原生方法改变radio的样式,顺便...这里label 的for可以将lable和input关联起来 <div> <input id='one' checked type="radio" name="all" value="0"><label fo...
  • input单选框在iphone6手机系统ios10选择bug。 手机在选择的时候竟然可以同时选择多个。代码如下 <label class="label" v-for="(item, index) in values" :key="index"> <input class="input-radio" :...
  • js移除input单选框(radio)选中效果

    千次阅读 2018-07-28 14:11:58
    上午做类似于这样一个单选框效果,需要把弹窗内单选框后的文本赋值到弹窗父页面。 可是在js中移除最开始是这么做的。 $('.chose-box-li').children('input').attr('checked', 'true') $(this).children('input')....
  • input、多选框。单选框
  • vue中单选框的默认选中不同于传统方式设置...input class=radio type=radio name=radios :value=i v-model=radio /> 生成后的代码就是 <input class=radio type=radio name=radios value=0 v-model=rad
  • checkbox是多选,怎么才能让他变成单选,效果跟radio一样呢,本菜鸟就自己写了个小程序,代码很简单
  • css:input:radio单选框实现图片手风琴 最终实现效果 源码 html代码块 <div class="wrap"> <input type="radio" name="a" id="i1" checked> <label for="i1" class="lab lab1">O N E</...
  • jQuery获取input(radio)单选框

    千次阅读 2021-04-12 17:29:57
    下面是一个简答的单选框内容: 正常的情况下,我们使用jQuery来选择标签,都是通过id选择器。 可是radio一般我们都不会设置id。 <form id="form1" > <input type="radio" name="sex" value="0" />男 <...
  • 1.jquery选中单选框 2.jquery 取消单选框  3.判断是否选中  4.设置不可编辑  
  • 今天给朋友们带来的是更改input的样式,下面分别是对单选框和上传文件的input的样式做了改变,效果如下: 注:不喜欢这个样式可以自行修改color和background。 HTML代码如下: <div> <label class="label...
  • 给每个input添加相同的name属性,这样表单提交时只能选择一个
  • input 复选框单选框样式美化

    千次阅读 2018-08-20 10:25:03
    input [type="checkbox"] :focus+label ::before , .checkbox input [type="radio"] :focus+label ::before { outline : thin dotted ; outline : 5 px auto -webkit-focus-ring-color ; outline-...
  • input radio单选框样式优化

    千次阅读 2018-09-17 13:34:54
    ...input id="item1" type="radio" name="item" value="水果" checked&gt; &lt;label for="item1"&gt;&lt;/label&gt;
  • input-radio(单选框)值的获取/默认选中等操作 由于每一个单选框均为一个单独的input,无法用id直接获取。可通过将一组radio配置为同一个class下,统一管理。 通过class获取input框的选中值: $("input[name='...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,152
精华内容 30,860
关键字:

input单选框