程序员经验分享-hwhale

使用 CSS 自定义单选按钮

2023-11-23

I am trying to create the custom radio button as shown in the picture below. enter image description here

我编写了代码并能够实现正确的样式，但无法使标签出现在单选按钮之前。

.lengend-action-buttons {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
label {
  font-weight: normal;
  font-size: 14px;
  Font-Family: Metric-Regular;
  Color: #666666;
  display: block;
  cursor: pointer;
}
[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
[type="radio"] + span:before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.10em;
  border-radius: 1em;
  border: 0.35em solid #fff;
  box-shadow: 0 0 0 0.10em #36B18D;
  margin-right: 0.75em;
  transition: 0.5s ease all;
}
[type="radio"]:checked + span:before {
  background: #36B18D;
  box-shadow: 0 0 0 0.10em #36B18D;
}
[type="radio"]:focus + span::after {
  font-size: 1.2em;
  line-height: 1;
  vertical-align: -0.125em;
}
<div class="lengend-action-buttons lengend-action-buttons-first">
  <label for="d3_graph_chart0011day">
    <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked">
    <span>1 Day</span>
  </label>
</div>

<div class="lengend-action-buttons lengend-action-buttons-first">
  <label for="d3_graph_chart0017day">
    <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day">
    <span>7 Day</span>
  </label>
</div>

<div class="lengend-action-buttons lengend-action-buttons-first">
  <label for="d3_graph_chart00130day">
    <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day">
    <span>30 Day</span>
  </label>
</div>

<div class="lengend-action-buttons lengend-action-buttons-first">
  <label for="d3_graph_chart00190day">
    <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day">
    <span>90 Day</span>
  </label>
</div>

请帮助我，解决这个问题。


Replace before with after反之亦然span是的，margin-left with margin-right:

.lengend-action-buttons {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
}
label {
  font-weight: normal;
  font-size: 14px;
  Font-Family: Metric-Regular;
  Color: #666666;
  display: block;
  cursor: pointer;
}
[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
[type="radio"] + span:after {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.10em;
  border-radius: 1em;
  border: 0.35em solid #fff;
  box-shadow: 0 0 0 0.10em #36B18D;
  margin-left: 0.75em;
  transition: 0.5s ease all;
}
[type="radio"]:checked + span:after {
  background: #36B18D;
  box-shadow: 0 0 0 0.10em #36B18D;
}
[type="radio"]:focus + span::before {
  font-size: 1.2em;
  line-height: 1;
  vertical-align: -0.125em;
}
<div class="lengend-action-buttons lengend-action-buttons-first">
  <label for="d3_graph_chart0011day">
    <input type="radio" name="date_range" id="d3_graph_chart0011day" value="1day" checked="checked">
    <span>1 Day</span>
  </label>
</div>

<div class="lengend-action-buttons lengend-action-buttons-first">
  <label for="d3_graph_chart0017day">
    <input type="radio" name="date_range" id="d3_graph_chart0017day" value="7day">
    <span>7 Day</span>
  </label>
</div>

<div class="lengend-action-buttons lengend-action-buttons-first">
  <label for="d3_graph_chart00130day">
    <input type="radio" name="date_range" id="d3_graph_chart00130day" value="30day">
    <span>30 Day</span>
  </label>
</div>

<div class="lengend-action-buttons lengend-action-buttons-first">
  <label for="d3_graph_chart00190day">
    <input type="radio" name="date_range" id="d3_graph_chart00190day" value="901day">
    <span>90 Day</span>
  </label>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

使用 CSS 自定义单选按钮 的相关文章

  • 如何使用XPath选择非空段落？

    我想要抓取的网页具有类似的结构 每个都有一个段落是一个问题 一个段落是一个答案 我想抓取每个问题和答案并将它们存储在两个项目中 问题是 在某些页面上 问题和答案分别是 xxx p 1 and xxx p 2 但在其他页面上 xxx p 1

  • 如何让CSS选择以字符串开头的ID（不是Javascript）？

    如果 HTML 中有这样的元素 id product42 id product43 如何匹配所有以 product 开头的 id 我已经看到了完全使用 javascript 执行此操作的答案 但是如何仅使用 CSS 执行此操作 id pro

  • 是否可以设置输入文本值的样式？

    我想知道是否可以设置输入框值的样式 such http jsfiddle net aCwhY as

  • jQuery 变量在定义时声称它是未定义的

    我试图在同一页面上有两个自动填充文本框 一个用于手机型号 input1 一个用于固件 input2 当两者都填充时 我希望显示一个带有ID input1input2 的div 但是当在input1 中输入值时 它声称phone 的变量未定义

  • 将图像编码为base64有什么效果？

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小

  • html5 canvas 上的错误显示 lineWidth=1

    I have example https developer mozilla org samples canvas tutorial 4 5 canvas linewidth html https developer mozilla org

  • 从字体到跨度（大小和颜色）和背面的正则表达式（VB.NET）

    我正在寻找一个正则表达式 可以将我的字体标签 仅具有大小和颜色属性 转换为具有相关内联CSS的span标签 如果有帮助的话 这将在 VB NET 中完成 我还需要一个正则表达式来实现相反的效果 下面详细说明的是我正在寻找的转换示例 font

  • Bootstrap Affix Nav 导致下面的 Div 向上跳转

    我使用 Bootstrap 的 Affix 函数创建了一个 JSFiddle 以便在向下滚动并且标题移出视图时使导航保持在屏幕顶部 我遇到的问题是 当使用纯 HTML 时 导航下方的文本会过早地跳起来并隐藏在导航后面 查看有问题的代码her

  • Beautifulsoup findAll 是如何工作的

    我注意到一些奇怪的行为findAll的方法 gt gt gt htmls p class slytherin p p class gryffindor p gt gt gt soup BeautifulSoup htmls html par

  • LESS CSS 语法对现代化很有用

    通常我使用现代化 http modernizr com 了解浏览器的功能 同时 我用LESS CSS http lesscss org 使我的CSS更具可读性和可维护性 使用 LESS 嵌套规则的常见样式如下所示 header color

  • 类方法作为 JavaScript 中的事件处理程序？

    JavaScript 中是否有最佳实践或通用方法将类成员作为事件处理程序 考虑以下简单示例

  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像

  • 如何在bootstrap中默认隐藏侧边栏？

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst

  • 您可以将现有的 div 复制到模式对话框吗

    我有一个带有多个面板的仪表板来显示不同的信息 我希望能够添加一个按钮来以模式显示面板 我正在使用引导程序 我所能找到的只是已经编写的模态 我想复制作为面板的 div 标签的内容 然后将其显示在模型中 但我不确定如何进行 该面板的 html

  • 如何强制折断不可折断的字符串？

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link

  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过

  • 没有类的 CSS 选择器

    我正在使用选择器来选择不具有一个类的所有元素 list th not foo some rules 我怎样才能将其应用到多个班级 list th not foo list th not bar some rules 上面的 CSS 当然不会

  • 如何使用 JavaScript 获取元素的填充值？

    我有一个textarea在我的 HTML 中 我需要获取整数或浮点形式的填充数值 以像素为单位 我如何使用 JavaScript 获取它 我没有使用 jQuery 所以我正在寻找纯 JavaScript 解决方案 这将返回padding l

  • AngularJS 在指令运行之前通过 AJAX 检索数据

    我正在使用 AngularUIuiMap http angular ui github com directives map实例化谷歌地图的指令 uiMap 指令非常适合处理硬编码数据 mapOptions and myMarkers 但是

  • 使用 VBA 通过 Access 导航网页/操作 IE

    你好 StackOverflow 社区 我有一个关于使用 Access VBA 操作 IE 的问题 本质上 我正在尝试编写代码 使用 IE 打开特定网页 在该页面中搜索特定链接 目标链接的名称将取决于用户的情况 通过以编程方式单击该链接导航

随机推荐

  • 如何获取Java中特定包中的所有Class文件？

    正如描述所述 如何获取给定包名称的所有 Java 类文件的列表 我在 SO 和其他网站上看到了很多问题和方法来查找特定 Java 包中的所有类 大多数解决方案对我来说都不起作用 有时 他们处理 Jar 文件 但不处理文件夹中的 普通 Jav

  • SSH 的 java.sql.Connection 扩展 [重复]

    这个问题在这里已经有答案了 我有一个位于防火墙后面的 MySQL 数据库 只能通过 SSH 连接访问 有谁知道 java sql Connection 的实现 它允许我与该数据库建立 SSH 连接 您可以使用 SSH 的端口转发来执行此操作

  • templateUrl 不适合我

    我按照 angular io 入门项目使用种子结构 到目前为止一切正常 现在我想更改顶部组件以从单独的文件中查看视图 但我遇到了麻烦 工作代码是 import Component View from angular2 core Compon

  • 不带括号的构造函数调用[重复]

    这个问题在这里已经有答案了 有什么区别吗 var obj1 new Constructor and var obj2 new Constructor 鉴于Constructor是构造函数吗 根据MDN docs new foo 相当于 ne

  • 是否可以确定哪个 Fortran 编译器生成了“.mod”文件？

    假设我的机器上已经安装了一个软件包 我想弄清楚是否需要重新生成模块包含文件 mod 使它们与我的其余编译兼容 有什么办法可以做到这一点吗 我在某些时候遇到了类似的问题 涉及库和模块文件 但没有源 因为在某些情况下 获得正确的编译器比获得重新

  • 使用AppDelegate共享数据

    我找到了一些资料来解释如何使用 AppDelegate 在 iOS 应用程序中的对象之间共享数据 我已经很轻松地实现了它 并且对于我的情况来说这看起来是一个很好的方法 思考什么could使用 AppDelegate 完成 我想知道应该在哪里

  • 在史莱姆中加载新的依赖项？

    我正在使用 emacs 和 swank clojure 我如何解决以下情况 我已向 project clj 添加了新的依赖项 我在 shell 中运行 lein deps 来获取新的 dep 我有一个打开的现有史莱姆会话 并且想要使用新部门

  • Windows PowerShell 在哪里设置 $profile？

    我想移动我的默认 My Documents WindowsPowerShell 文件夹 但是 当我尝试这样做时 PowerShell 当然找不到 profile 是否有一个文件或其他内容可以编辑以将 PowerShell 指向不同的启动文件

  • 当 ajax 调用更改其值时，AngularJS 中的 ng-repeat 列表不会更新

    我完全糊涂了 当 ajax 调用更改其值时 为什么我的 ng repeat 不刷新 我在这里看到了很多问答 但没有一个谈到ajax调用 HTML div class row div class col xs 4 col sm 4 col m

  • 从泛型转换为特定子类

    我有一堂这样的课 public class MyClass

  • 闪亮的数据表：在新窗口中弹出有关所选行的数据

    我有一个闪亮的数据表 当用户选择某一行时 我想在新窗口中根据所选行显示一些其他数据 我尝试使用shinyBS包 但如果没有操作按钮我就无法使用它 而且我不想包含操作按钮 我希望在选择一行时显示弹出窗口 有任何想法吗 mymtcars hea

  • Android 资源 txt 文件的路径

    我正在做 FileReader fin new FileReader file android asset myFile txt 在 Android 项目和许多变体中 在运行时我得到一个文件未找到异常 该文件在资产文件夹中存在且正确 因此我

  • 在 Chrome 中，为什么 SVGforeignObjects 不缩放相对定位的内容？

    我在 SVG 中使用相对定位的 HTML 元素foreignObject 然而 在 Chrome 中 相对定位的内容并不尊重scale or viewBox 因此 它的尺寸不合适 这是我在 jsFiddle 上遇到的问题的示例 所有三个文本

  • 如何在 Django 中编辑和删除数据？

    我正在使用 django 1 0 并且我已经使用 Django 书中的示例创建了我的模型 我能够执行添加数据的基本功能 现在我需要一种检索该数据的方法 将其加载到表单中 change form 或其他东西 EDIT它并将其保存回数据库 其次

  • 出现错误 EBUSY：资源繁忙或锁定

    尝试运行 Nodejs 应用程序来测试 Raspberry 3 B Gpio Onoff 模块 但当我尝试运行该应用程序时出现此错误 fs js 114 throw err Error EBUSY resource busy or lock

  • 如何对通过 MS JDBC 驱动程序运行的 MS SQL Server 查询强制执行查询超时？

    我们怎样才能让 MS JDBC 驱动程序在 n 秒后抛出超时错误 背景 我们有一个应用程序 默认情况下使用 Microsoft JDBC 驱动程序 版本 4 0 来查询 SQL Server 2014 大多数时候 查询需要 10 20 秒才

  • 错误：未找到genymotion虚拟化引擎[关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 我不断收到以下错误 未找到 genymotion 虚拟化引擎 无法加载 VirtualBox 引擎 请帮我解决这个错误 我已经尝试过所有选项 1 重新安装genymotion和vir

  • AWS Elastic Beanstalk 将 PHP 与私有 Composer 存储库结合使用

    在 PHP 环境中使用 Amazon AWS Elastic Beanstalk 进行部署时 如何利用私有 Composer 存储库 具体使用GitHub 问答风格 答案如下 我们需要为通过 AWS 的 Elastic Beanstalk

  • 是否可以在 WPF 应用程序中使用 UWP API？

    Windows 10 通用平台的新通知 API 就是一个例子 我可以在 WPF 应用程序中使用这组 API 吗 如果可以的话有什么限制吗 与此相关的文档链接将不胜感激 可以在 WPF 应用程序中使用 UWP API 但是 并非所有 UWP

  • 使用 CSS 自定义单选按钮

    I am trying to create the custom radio button as shown in the picture below 我编写了代码并能够实现正确的样式 但无法使标签出现在单选按钮之前 lengend act

热门标签