首页 > 其他分享 >如何修改input的radio类型选中样式

如何修改input的radio类型选中样式

时间:2024-03-16 22:33:54浏览次数:23  
标签:样式 50% radio 选中 input border

清除原生样式:

input[type='radio'] {
          appearance: none; /* 用于覆盖默认的外观 */
          -webkit-appearance: none; /* Safari and Chrome */
          -moz-appearance: none; /* Firefox */
        }

设置默认选择框样式:

.customRadio {
          margin: 0;
          margin-right: 8px;
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%; /* 使其呈圆形 */
          border: 2px solid #ccc; /* 默认边框颜色 */
          position: relative;
        }

设置选中球样式:

 /*单选按钮选中后增加的样式*/
        > input[type='radio']:checked:before {
          content: '';
          display: block;
          width: 12px;
          height: 12px;
          background-color: #348930; /* 修改选中状态的颜色 */
          border-radius: 50%; /* 使其呈圆形 */
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

 

标签:样式,50%,radio,选中,input,border
From: https://www.cnblogs.com/Simoon/p/18077783

相关文章

  • ic基础|时序篇06:输入约束set_input_delay与输出约束set_output_delay详解
    大家好,我是数字小熊饼干,一个练习时长两年半的ic打工人。我在两年前通过自学跨行社招加入了IC行业。现在我打算将这两年的工作经验和当初面试时最常问的一些问题进行总结,并通过汇总成文章的形式进行输出,相信无论你是在职的还是已经还准备入行,看过之后都会有有一些收获,如果看......
  • IO流(主要是记住四大类InputStream,OutputStream、Reader和Writer,其他都是他们的子类)
    IO流1、文件(1)文件概念文件就是保存数据的地方。例如word文档,txt文件,execl文件等等。(2)文件流文件在程序中是以流的形式来操作的。流:数据在数据源(文件)和程序(内存)之间经历的路径输入流:数据从数据源(文件)到程序(内存)的路径输出流:数据从程序(内存)到数据源(文件)的路径2、常用......
  • Qt教程 — 3.4 深入了解Qt 控件:Input Widgets部件(3)
    目录1 InputWidgets简介2如何使用InputWidgets部件2.1Dial组件-模拟车速表2.2 QScrollBar组件-创建水平和垂直滚动条2.3 QSlider组件-创建水平和垂直滑动条 2.4 QKeySequenceEdit组件-捕获键盘快捷键InputWidgets部件部件较多,将分为三篇文章介绍文章1(Qt......
  • 后端返回的值,不能直接用于表单展示,有的表单项的值是根据其他表单项计算出来的,有的是根
    后端返回的值,不能直接用于表单展示,有的表单项的值是根据其他表单项计算出来的,有的是根据下拉框的选中项的其他属性获取到的,这时候该如何处理?还有最后要保存的时候,传给后端的值,与表单的数据结构也不一样,有的甚至没有放在表单属性上,比如当前下拉框选中的对象而非id,整个需要传给后端......
  • Java-InputStream转Base64
    首先定义实体对象/***图片数据封装*/@DatapublicclassPgNewImageDto{/***文件类型*/privateStringfileType;/***文件数据*/privateStringfileData;}转换实现/***输入流转换为实体对象*@param......
  • 禁用右键菜单、禁用鼠标选中、// 禁止键盘F12键
    禁用右键菜单、禁用鼠标选中、//禁止键盘F12键//禁用右键菜单document.oncontextmenu=newFunction("event.returnValue=false");//禁用鼠标选中document.onselectstart=newFunction("event.returnValue=false");//禁止键盘F12键......
  • 【AutoCAD .NET】创建Hatch时报错eInvalidInput
    问题出处https://forums.autodesk.com/t5/net/hatch-to-drawn-polyline-e-message-quot-einvalidinput-quot/m-p/9631373问题描述我使用以下语句绘制了一条多段线:Acad.Application.DocumentManager.MdiActiveDocument.SendStringToExecute("PL",true,false,true);按如下......
  • 蓝河 BlueOS Studio——input绑定数据
    input绑定数据遇到的问题 虽然是一个很简单的功能,但是不能用本地测试,这时候就会出现问题,我在这个问题上卡了一阵子,很是不舒服,写出来,让大家引以为戒,节约大家的时间。<inputtype="text"model:value="{{info}}"placeholder="请输入参数"/><textclass="title">{{info}}......
  • 解决datepicker设置限定日期范围后 选中节点日期不生效
    问题描述:项目要求设定日期限定范围,如2023-04-01至2024-03-01,其它不可选 但每当我选择的月份包含4月或次年3月时,即使选中日期,弹窗也不消失经过我机智过人的大脑”短暂“思考后,发现当我设定限定范围时,是这样设置的returntime.getTime()<newDate("2023-04-01").getTime()......
  • tp5框架No input file specified
    最近从网上下载了一个项目,本地搭建好环境。访问页面出现Noinputfilespecified。这个问题之前就遇到过,是因为权限的问题,导致nginx无法解析php文件,这次有点不一样所以记录一下。在项目的public目录下发现有这样一个文件,user.ini 打开文件后是这样的内容open_basedir的作......