程序员经验分享-hwhale

选中时更改标签颜色单选

2023-11-27

我在检查单选按钮后如何将单选按钮的标签文本颜色更改为蓝色时遇到问题。我已经遵循了许多示例代码，但它不起作用。

下面是我的html代码

<div class="input-group">
   <label for="pickup-1" class="radio-custom-label">10.00 PM</label>  
   <div class="text-group-field pickup-day choose-time">
     <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
   </div>
</div>

enter image description here


您需要稍微更改一下 HTML 结构并使用~ (通用兄弟组合器) 选择器，例如：

.radio-custom:checked ~ label {
  color: blue;
}

看看下面的片段：

.radio-custom:checked ~ label {
  color: blue;
}

label {
  display: block;
  flex: 1;
}

.input-group {
  display: block;
}

.text-group-field {
  padding: 10px;
}

.inner-block {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}
<div class="input-group">
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-1" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-1" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-2" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-2" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
   <div class="text-group-field pickup-day choose-time">
     <div class="inner-block">
       <input id="pickup-3" class="radio-custom input-group-field" name="radio-group" type="radio">
       <label for="pickup-3" class="radio-custom-label">10.00 PM</label>
     </div>
   </div>
</div>

希望这可以帮助！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

选中时更改标签颜色单选 的相关文章

  • 除了更改标题之外，如何在 Firefox 中强制另存为对话框？

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href

  • 从 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre

  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un

  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x

  • HTML 中部分着色的阿拉伯语单词

    我不会说阿拉伯语 但我需要我们网站上对阿拉伯语的具体支持 我需要将部分阿拉伯语单词放在 span 与单词其他部分的风格不同 当我输入两个字符时 and 它们被组合成word 但是当我使用 HTML 标记时 span span 这些字母在输出

  • Iframe 相对路径挑战

    我有一个页面 在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP

  • 现在 CSS3 供应商前缀有多必要？ [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再

  • Angular 2+ 安全性；保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那

  • 如何使用tampermonkey模拟react应用程序中的点击？

    我正在尝试使用 Tampermonkey 脚本模拟对 React 元素的点击 不幸的是 由于 React 有自己的影子 DOM 所以天真的方法使用document querySelector 不工作 我遇到了一些需要修改 React 组件本

  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive

  • 避免响应式页面的重复内容

    我目前正在做一个涉及响应式设计的项目 整个布局应该使用HTML和CSS来实现 我知道可以使用 java 脚本将内容从一个列布局移动到另一列布局 而无需复制内容 但是使用 HTML 和 CSS 是否可以实现相同的效果 以下面的例子为例 它会在

  • 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe

  • 如何获取给定 DOM 元素的所有定义的 CSS 选择器？

    如何使用 jQuery 获取给定 DOM 元素的所有定义的 CSS 选择器 定义后 我的意思是在应用于任何样式表的所有 CSS 选择器document 在某种程度上 这类似于 FireBug 实现的功能 其中显示所选 DOM 元素的所有应用

  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob

  • Javascript 纪元时间（以天为单位）

    我需要以天为单位的纪元时间 迄今为止 我已经看到过有关如何翻译它的帖子 但几天后就没有了 我对纪元时间很不好 我怎么能得到这个 我需要以天为单位的纪元时间 我将解释为您想要自纪元以来的天数 纪元本身是第 0 天 或第 1 天的开始 无论您如

  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i

  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

  • Schema.org 的常见问题解答页面

    我有一个常见问题解答页面 我想用更好的 html 架构来实现它

  • 如何从图像输入中获取 xy 坐标？

    我有一个输入设置为图像类型

  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch

随机推荐

  • 如何在 Go 中获取文件的组 ID (GID)？

    os Stat 返回一个FileInfo对象 它有一个Sys 返回一个方法Interface 没有方法 虽然我有能力fmt Printf 它 看到 Gid 我无法以编程方式访问 Gid 我如何在这里检索文件的 Gid file info o

  • 用不同的颜色填充水平线上方和下方的区域[重复]

    这个问题在这里已经有答案了 Aim 我正在尝试填充 R 中 ggplot 生成的图中两条线之间的区域 我想用与水平线下方不同的颜色填充水平线上方的线之间的所有内容 我成功地用单一颜色填充了两条线之间的所有内容 但是 我无法用两种不同的颜色区

  • 通过 PHP 使用 R

    我对 R 比较陌生 对 Linux Ubuntu 命令行也很陌生 我正在尝试用 PHP 编写一个页面 其中包含我想在 R 中执行的命令 然后将结果传回以便能够使用它们 我尝试了下面代码的变体 但我只得到 R 欢迎消息作为我的输出 当我在命令

  • 完成后如何杀死 doMC 工作人员？

    doMC 的文档似乎非常稀疏 仅列出了 doMC package 和 registerDoMC 我遇到的问题是我将通过 doMC foreach 生成几个工作人员 但是当工作完成后 他们只是坐在那里占用内存 我可以去寻找他们的进程ID 但我

  • 如何配置 Play! 2.4.2 HTTPS 密钥库？

    我是 Play Framework 的新手 只是尝试在 Java 8 上首次使用 2 4 2 来使用 HTTPS 我可以让它使用默认密钥库 但不能使用我自己的密钥库 我配置了working默认密钥库位于build sbt javaOptio

  • Android 版 Google 地图 V2 上圆圈上的 LatLng 点

    I need to store all the LatLng points of circle drawn on google map like 我有圆和半径 以米为单位 如何得到那个 我尝试使用代码 private ArrayList

  • 重置数据表中的自动增量

    我填充一个DataSet with a DataAdapter to a SQL CE数据库 数据显示在DataGrid它绑定到 DataSet 的 DataTable 我有一个自动递增 ID 字段 或在 SQLCE 中 称为PRIMARY

  • UITableViewCells 中的图像加载错误

    我正在开发一个应用程序 我想在带有自定义单元格的 UITableView 中显示几乎与屏幕大小一样大的图像 图像加载良好 有点慢 但它们加载了 但是当我在 TableView 中滚动时 它们出现在错误的单元格中 例如 单元格 5 中的 Im

  • ASP.Net MVC 将标签值回发到您的控制器

    使用 EditorTemplate 时 如果我希望模型上的值显示在屏幕上 同时又发布回控制器 我应该使用什么助手 IE 如果我使用 TextBoxFor Html TextBoxFor model gt model RoomTypeName

  • 如何使用指针从不同的函数访问局部变量？

    我可以访问不同函数中的局部变量吗 如果是这样 怎么办 void replaceNumberAndPrint int array 3 printf i n array 1 printf i n array 1 int getArray int

  • Oct2Py 仅返回第一个输出参数

    我使用 Oct2Py 是为了在我的 Python 代码中使用一些 M 文件 假设我有这个简单的 Matlab 函数 function a b toto c a c b c 1 end 如果我在 Octave 中调用它 会发生什么显然是 gt

  • 当没有任何变化时如何强制更新 MySQL 记录

    我的数据库表有一列定义要使用ON UPDATE CURRENT TIMESTAMP 字段 last access 类型 时间戳 整理 属性 更新 CURRENT TIMESTAMP Null No 默认值 CURRENT TIMESTAMP

  • 如何使用 Python Mock 引发异常 - 但将 Errno 设置为给定值

    给定以下 Python 代码 elif request method DELETE try os remove full file return jsonify results purged s full file except OSErr

  • ES6 对象字面量中的简洁方法和非简洁方法

    let module add function a b return parseInt a parseInt b sub a b return parseInt a parseInt b 使用这两种方法的根本区别是什么concise方法语法

  • 使用 Ruby gem 部署 shell 脚本并安装在 bin 目录中

    我希望将 shell 脚本与属于该包的其他 Ruby 程序一起放置在我的 gem 的 bin 目录中 我希望将此 shell 脚本按原样安装在 bin 目录中 即没有包装器 红宝石有可能做到这一点吗 如果没有其他可能的话 我会对安装后挂钩感

  • 有没有办法将EntityManager注入到服务中

    使用时Symfony 3 3 我声明这样的服务 class TheService implements ContainerAwareInterface use ContainerAwareTrait 在我需要 EntityManager 的

  • Spring Batch corePoolSize VSthrottle-limit

    我想知道两者之间的区别核心池大小 and 油门限制作为定义多线程配置的 Spring Batch 属性 感谢这篇文章 我了解了 corePoolSize 和 maxPoolSize 之间的区别 Spring ThreadPoolTask E

  • RMI 的替代方案

    我有一个小型 Java SE 应用程序 它实际上是一个位于数据库之上的胖客户端 为了进一步提高我的 Java 技能 我决定用它制作一个客户端 服务器应用程序 服务器应用程序与数据库通信并处理各种冗长的操作 而客户端应用程序仅接收结果 主要是

  • 如何在 OCaml 中使用断言？

    我正在尝试学习 OCaml 但在断言语句方面遇到了问题 在解释器中我可以使用它 Zameers MacBook Air zmanji ocaml OCaml version 4 01 0 let x 1 val x int 1 assert

  • 选中时更改标签颜色单选

    我在检查单选按钮后如何将单选按钮的标签文本颜色更改为蓝色时遇到问题 我已经遵循了许多示例代码 但它不起作用 下面是我的html代码 div class input group div

热门标签