html - 造型 radio 输入问题-6ren

html - 造型 radio 输入问题

转载作者：太空宇宙更新时间：2023-11-04 02:19:00

25

4

我想在“标签”标签内设置单选输入的样式。我已经改变了背景颜色，但是当我点击我的 radio 时，里面的白点没有出现。我为此编写了代码，但我真的不知道问题出在哪里。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      label {
        display: inline-block;
        cursor: pointer;
        position: relative;
        padding-left: 25px;
        margin-right: 15px;
        font-size: 13px;
        display:block;
      }

      input[type=radio] {
        display: none;
      }

      label:before {
        content: "";
        display: inline-block;
        width: 17px;
        height: 17px;
        margin-right: 10px;
        position: absolute;
        left: 0;
        bottom: 1px;
        background-color: #ff7900;
        box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
        border-radius: 8px;
      }

      input[type=radio]:checked + label:before {
        content: "\2022";
        color: #f3f3f3;
        font-size: 30px;
        text-align: center;
        line-height: 18px;
        position: absolute;
      }

      .input {
        font-size: 20px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <form>
      <label class="input"><input type="radio" name="number" class="hehe">xxxxxxxx</label>
      <label class="input" ><input type="radio" name="number" class="hehe">xxxxxxx</label>
      <label class="input"><input type="radio" name="number" class="hehe">xxxxxxx</label>\
      <label class="input"><input type="radio" name="number" class="hehe">xxxxxxx</label>
    </form>
  </body>
</html>

最佳答案

这个:

input[type=radio]:checked + label:before

要求 label 紧跟在输入之后。

但是，您的 HTML 是

 <label class="input"><input type="radio" name="number" class="hehe">xxxxxxxx</label>

标签围绕着输入，因此选择器将不起作用。

你需要

<input type="radio" name="number" class="hehe"/><label class="input">xxxxxxxx</label>

或者；在标签内的 span 上使用伪元素而不是标签本身

 <label class="input">
   <input type="radio" name="number" class="hehe">
   <span>xxxxxxxx</span>
 </label>

与

input[type=radio]:checked + span:before

关于html - 造型 radio 输入问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38436395/

25

4

0

文章推荐： html - 在 Wordpress 的 HTML 中使用短代码

文章推荐： node.js - 如何使用 Peer.js 向特定对等方发送通知

文章推荐： python - 如何在 PyCharm 中更改 Python 版本

css - Shopify 造型
有什么办法可以在shopify的css中获取页面标识符。我想在 shopify 特定页面而不是所有页面中进行样式工作。所以我想指定页面，主页或我构建的页面，博客页面或购物页面等。最佳答案你可以
wpf - 造型 RadChart
我正在尝试设计 RadChart 的样式。这是一个条形图，我想更改条形的默认颜色。所以我使用了 RadChart.PaletteBrushes 并定义了 SolidBrush 颜色(在以下链接中找到了
android - 造型 OssLicensesMenuActivity
我正在使用一个名为 play-services-plugins 的 Google 库至include Open Source Notices在我的应用程序上。我可以毫无问题地实现它，但我不知道如何设
Papyrus Marte 造型
我正在尝试在 eclipse 中使用 papyrus Marte 进行建模，我想知道双向可导航关联与仅一个方向可导航关联之间的区别。提前致谢。最佳答案因为它代表一个链接，所以一个关联有两个端点。
android - 造型 Linkify
有什么方法可以设置由 Linkify.addLinks() 操作生成的链接的样式吗？具体来说，我想更改默认的蓝色。谢谢最佳答案我认为样式 linkify 是可能的，但如果你想添加链接，你可能想使
CSS 等待栏？造型
我想知道是否可以设置栏的样式 http://puu.sh/3LSN8.png在那张图片中(在文本区域中)。我不知道它叫什么，但它会闪烁，它是显示文本所在位置的栏。谢谢。最佳答案它叫做 care
html - 造型 MathJax
我对此很困惑。我搜索了教程，但找不到对我来说很有意义的教程，如何为 MathJax 输出设置 CSS 类？我只是想让字体变大。当前包括: 在我的页面底部。可以很好地渲染 TEX，但我想在上面设置一
css - 造型 tumblr 转发评论
我到处找这个，没有运气!我希望你们能帮助我:) 我正在制作一个自定义的 tumblr 主题，但有一件事我不喜欢它，即 tumblr 以表格方式显示其帖子评论。我的意思具体是这样的: 在 tumblr
css - 造型 KendoUI 组合框
我想为 KendoUI 元素的必填字段和无效字段设置样式(例如，必填输入的背景颜色不同)。我使用的样式在这里: .k-textbox>input[required], .k-picker-wrap
css - 造型 nvd3 图表
我在设计这个 nvd3 line chart 时遇到了一些问题.我有很多看起来更接近我喜欢的方式，但 y 轴标签和图表之间的窄边距让我发疯。我能够对 x 轴标签使用负行间距，但显然这对 y 轴不起作用
jquery - 造型 Telerik :RadSpell
有没有人用过这个控件？它在 firefox 中显示，顶部的关闭按钮一直向右移动，所以我想调整 css 或在其上使用 jquery 来修复它。有谁知道如何做到这一点？我一直在尝试使用 DialogCss
css - 造型 WordPress 循环问题
我正在尝试根据其工作位置来设置常规 WP 循环的样式。我在循环中添加了检查以查看它的位置并相应地添加类并且一切正常。问题是，当我打开 Style.CSS 以使用这些类并添加属性时，它不起作用。所以我
html - 造型 ionic2 单选按钮失败
我有一些单选按钮，但文本看起来离单选按钮很远，我想让文本更靠近单选按钮这是我的代码 ion-row radio-group (ionChange)="onChange($event)">
css - 造型 polymer 核心支架
默认情况下，core-scaffold 侧边导航的背景颜色为白色，内容的背景颜色接近于灰色。我想反转这些样式，使侧导航的背景颜色为灰色，内容为白色。我添加了以下规则，它们在 Chrome 上执行我想
html - 造型 radio 输入问题
我想在“标签”标签内设置单选输入的样式。我已经改变了背景颜色，但是当我点击我的 radio 时，里面的白点没有出现。我为此编写了代码，但我真的不知道问题出在哪里。
css - 造型 polymer 元素的可扩展设置
似乎对于造型 polymer 1.0 元素基本上有两种选择: 通过自定义样式设置样式: 样式可以应用于 ...部分。在此，您可以调整预定义的样式。通过 dom-module 元素设置样式: 另一个例
javascript - 造型 Facebook Likebox
有没有办法在没有插件的情况下设置 facebook likebox 的样式？我的点赞框在深色背景上，蓝色链接表示我的 Facebook 页面名称没有很好地融合，我想更改点赞框内的所有文本颜色，我必须使
ruby-on-rails - 造型 'collection_radio_buttons'
我能否以在集合中的每个单选按钮之间出现换行符的方式设置这些样式？ f.collection_radio_buttons( :chosen, [['A1', 1],['A2', 2], ['A3
python - 根据条件设置 Pandas 造型
我正在尝试根据条件为数据框的文本或单元格着色。这是我的代码。它有效: def Highlight_Majors(val): color = 'blue' if val == "Austria"
android - 造型 Sherlock 操作栏
我正在尝试将图像设置为 Sherlock 操作栏的背景，但即使它是 720 x 112 像素，图像似乎也不会拉伸(stretch)。白色部分仍然是操作栏的一部分，因为三角形设置在正确的位置并且右侧的按

首页

博学

6Ren·AI

商城

html - 造型 radio 输入问题