精华内容
下载资源
问答
  • radio单选按钮样式
    2021-06-16 12:26:02

    radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的.

    单选按钮最常见的地方就是性别的选择,这里以此为例,html代码如下:

    性别:

    保密

    css改变radio按钮样式,这里使用了伪类(在css中一定要擅用伪类,能更好的实现功能):

    .formSex input{

    display: none;

    margin-top: 10px;

    }

    .formSex label{

    box-sizing: border-box;

    position: relative;

    margin-right: 34px;

    margin-top: 10px;

    }

    .formSex label::before{

    display: inline-block;

    content: "";

    width: 16px;

    height: 16px;

    border-radius: 50%;

    border: 1px solid rgb(219, 219, 219);

    margin-right: 6px;

    vertical-align: bottom;

    }

    .formSex input:checked+label::before{

    border: 1px solid #fff;

    background-color: #fff;

    }

    .formSex input:checked+label::after{

    display: inline-block;

    content: "";

    width: 18px;

    height: 18px;

    border-radius: 50%;

    position: absolute;

    left: 0;

    bottom: 0;

    background-color: #F60;

    }

    在不使用js的情况下就改变了radio的按钮样式了,既然是自定义样式,就可以随心情自己修改了,我这里实现的效果是这样的

    4f03bde70d96

    image.png

    更多相关内容
  • 修改radio单选按钮样式 input { width: 0.34rem; height: 0.34rem; appearance: none; position: relative; outline: none; } input:before { content: “”; width: 0.34rem; height: 0.34rem; border: 1px solid #...

    修改radio单选按钮样式

    input {
    width: 0.34rem;
    height: 0.34rem;
    appearance: none;
    position: relative;
    outline: none;
    }
    input:before {
    content: “”;
    width: 0.34rem;
    height: 0.34rem;
    border: 1px solid #00d4d0;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    }

    input:checked:before {
    content: “”;
    width: 0.34rem;
    height: 0.34rem;
    border: 1px solid #00d4d0;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    }
    input:checked:after {
    content: “”;
    width: 0.2rem;
    height: 0.2rem;
    text-align: center;
    background: #00d4d0;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0.09rem;
    left: 0.1rem;
    }

    选中前
    在这里插入图片描述

    选中后
    在这里插入图片描述

    展开全文
  • 漂亮的Radio单选按钮样式

    效果预览

    css样式私聊

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="css/styleredio.css">
    </head>
    <body>
    <div class="wrapper">
        <input type="radio" name="select" id="option-1" checked>
        <input type="radio" name="select" id="option-2">
        <label for="option-1" class="option option-1">
            <div class="dot"></div>
            <span>学生</span>
        </label>
        <label for="option-2" class="option option-2">
            <div class="dot"></div>
            <span>教师</span>
        </label>
    </div>

      
    </body>
    </html>

    css样式

    -----------------------------------------------------

    @import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Lato', sans-serif;
    }
    html,body{
    }
    .wrapper{
      display: inline-flex;
      /*background: #fff;*/
      height: 70px;
      width: 300px;
      align-items: center;
      justify-content: space-evenly;
      border-radius: 5px;
      padding: 20px 15px;
      margin-left: -1.9rem;
        margin-top: -3rem;
      /*box-shadow: 5px 5px 30px rgba(0,0,0,0.2);*/
    }
    .wrapper .option{
      background: #fff;
      height: 40px;
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin: 0 10px;
      border-radius: 5px;
      cursor: pointer;
      padding: 0 10px;
      border: 2px solid lightgrey;
      transition: all 0.3s ease;
    }
    .wrapper .option .dot{
      height: 20px;
      width: 20px;
      background: #d9d9d9;
      border-radius: 50%;
      position: relative;
    }
    .wrapper .option .dot::before{
      position: absolute;
      content: "";
      top: 4px;
      left: 4px;
      width: 12px;
      height: 12px;
      background: #0069d9;
      border-radius: 50%;
      opacity: 0;
      transform: scale(1.5);
      transition: all 0.3s ease;
    }
    input[type="radio"]{
      display: none;
    }
    #option-1:checked:checked ~ .option-1,
    #option-2:checked:checked ~ .option-2{
      border-color: #0069d9;
      background: #0069d9;
    }
    #option-1:checked:checked ~ .option-1 .dot,
    #option-2:checked:checked ~ .option-2 .dot{
      background: #fff;
    }
    #option-1:checked:checked ~ .option-1 .dot::before,
    #option-2:checked:checked ~ .option-2 .dot::before{
      opacity: 1;
      transform: scale(1);
    }
    .wrapper .option span{
      font-size: 20px;
      color: #808080;
    }
    #option-1:checked:checked ~ .option-1 span,
    #option-2:checked:checked ~ .option-2 span{
      color: #fff;
    }
    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...title...

     

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title></title>
        <style>
            .radio_type {
                width: 30px;
                height: 30px;
                /*appearance: none;*/
                position: relative;
                outline: none;
            }
            .radio_type:before {
                content: "";
                width: 28px;
                height: 28px;
                border: 1px solid #41BEAE;
                display: inline-block;
                border-radius: 50%;
                vertical-align: middle;
                background: white;
            }
            .radio_type:checked:after {
                content: "";
                width: 22px;
                height: 21px;
                text-align: center;
                background: #41BEAE;
                border-radius: 50%;
                display: block;
                position: absolute;
                top: 4px;
                left: 4px;
            }
        </style>
    </head>
    
    <body>
    <label> <input class="radio_type" name="my" type="radio"/>选项1</label>
    <label> <input class="radio_type" name="my" type="radio"/>选项2</label>
    <label> <input class="radio_type" name="my" type="radio"/>选项3</label>
    
    </body>
    
    </html>

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

    万次阅读 2018-12-25 15:37:34
    如果直接对单选按钮设置样式,那么这个伪类并不实用,因为没有多少样式能够对单选按钮起作用。不过,倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。 很多时候,无论是为了表单元素统一,还是...
  • 默认的radio样式很丑,那么如何改变其默认的样式呢?我最开始想的是能不能直接给radio设置背景色等,发现并无用!能够借助于标签来建立一个相似于radio的效果。先来看下效果:css html代码以下:html在校生非在校生...
  • radio单选按钮样式重写

    千次阅读 2018-06-07 11:48:15
    这是html &amp;amp;lt;div class=&amp;...quanxian-option&...radio-btn&amp;quot; type=&amp;quot;radio&amp;quot; name=&amp;quot;quanxian&amp;quot; value=&a
  • //修改单选的颜色 ::v-deep { .el-radio { //添加边框 // border: 1px solid rgb(207, 204, 204); //选中时边框的颜色 &.is-checked { // border: 1px solid #28AC5D !important; } //鼠标滑过改变字体...
  • 去掉radio单选按钮的默认样式

    千次阅读 2018-11-08 15:49:43
    在实际项目中radio单选按钮的默认样式是很讨厌的 很多地方用了跟主色调不一样很突兀 我在网上查了查自己改了一个 &lt;dd&gt; &lt;label&gt; &lt;input type="radio" checked=&...
  • 修改radio按钮样式的方法单纯的修改radio按钮的border background-color 的属性是无法修改radio按钮的样式的。原理:把原先的input按钮隐藏掉,通过伪元素,在label标签前画一个自定义的图案,比如圆形。 再把label...
  • input type="radio" name="item" value="1"> <label for="item1"></label> </div> .box{ height : 0.6rem; display : flex; align-items: center; position : relative; line-height: ...
  • html:选项一选项二css:div {position: ...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:...
  • 小程序单选按钮样式
  • 原生单选按钮input[type=="radio"]的样式总是不那么友好,在不同的浏览器中表现不一。我们可以借助伪类来实现。一、 控件与label 并列是否展示思路1、可以为元素添加生成性内容(伪元素),用其来设置单选按钮样式。...
  • 这种纯CSS3美化单选按钮radio的方法适用于以下情况: 1、可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉 2、只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出...
  • css radio单选
  • 效果测试代码.weicot_radio{float:left;margin-top:0.5em;margin-right:0.5em;}.weicot_radio input[type="radio"]{display:none;}.weicot_radio input[type="radio"] + label{padding:0.2em 1em;border:1px solid #...
  • input type="radio" name="paymeradio" value="" /> css代码如下所示: input[type="radio"] { appearance: none; -webkit-appearance: none; outline: none; margin: 0; vertical-ali...
  • 单选按钮样式修改

    千次阅读 2019-06-01 17:48:15
    单选按钮样式修改 在单选按钮中,默认样式是不能修改的,但我们可以自己写样式替换默认样式,主要用到伪类input:checked label没有将input包裹的话,需要用for来关联input的id 效果: <style> label { position: ...
  • qq_遁去的一_1.radio-toolbarinput[type="radio"]{display:none;}.radio-toolbarlabel{display:inline-block;background-color:#ddd;padding:4px11px;font-family:Arial;font-size:16px;cursor...
  • <form> 单选框 <i class='input_style radio_bg'><input type="radio" name="hot" ... 这是一款通过jQuery特效来改变单选按钮 复选框样式,将它们进行美化处理的网页特效,适合新手,代码量非常少。
  • 一、Radio单选按钮组水平排列。 html代码: <div class="col-xs-3"> <label class="form-label col-md-4">试用月绩效奖金</label> <div cl
  • 关于多选框设置样式的办法,其实与radio单选框设置的方法一样,唯一不同的是,在css样式里,/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */的下面定义的css需要加上!important才会生效,意思是...
  • I was given a design with square radio buttons.Is there a way to style radio buttons to look like this?The only way, I think I could accomplish this is by using images, and swap the checked/checked ...
  • 又一款漂亮的带动画效果的CSS3 checkbox复选框、radio单选按钮特效,鼠标点击那些按钮时,会有动画效果,而且一改默认单选框和复选框的呆板样式,将里面的对勾和小点换成了其它的自定义图案,比原来的漂亮多了。
  • Html单选按钮自定义样式

    千次阅读 2021-06-10 12:09:26
    ”,于是在找了一遍单选按钮样式,没一个说是修改圆圈圈,于是又去网上找了一遍,各种各样,自己选了其中一种并稍加修改,感觉简单通俗易懂,而且最重要的是效果好,故在此和大家分享一下。原理:之前已经提及,...
  • Element UI之Radio单选框组样式

    千次阅读 2021-02-25 17:02:20
    Radio单选框组:https://element.eleme.cn/#/zh-CN/component/radio .radio { /deep/ .el-radio-group { height: 20px; width: 60px; /deep/ .el-radio { margin: 0; height: 20px; } } } /deep/ .el-radio...
  • 1,给input 标签增加class="radio_type" style="border:none;top:0px;" <input type="radio" name="<%=sci_id %>" value="<%=ssoi_id %>...2,在css 中增加radio_type 样式 .radio_ty...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,992
精华内容 10,796
关键字:

radio单选按钮样式