草庐IT

html - 单击标签不检查单选按钮

coder 2023-08-09 原文

我正在尝试通过像这样设置 html 来制作颜色选择器:

<ol class="kleurenkiezer list-reset clearfix">
    <li>
        <input type="radio" id="kleur_wit" name="kleurenkiezer" value="wit">
        <label for="kleur_wit" style="background: white;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_creme" name="kleurenkiezer" value="creme">
        <label for="kleur_creme" style="background: #fffceb;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_lichtbruin" name="kleurenkiezer" value="lichtbruin">
        <label for="kleur_lichtbruin" style="background: #968272;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_bordeauxrood" name="kleurenkiezer" value="bordeauxrood">
        <label for="kleur_bordeauxrood" style="background: #941514;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_oudgroen" name="kleurenkiezer" value="oudgroen">
        <label for="kleur_oudgroen" style="background: #7fa298;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_lichtblauw" name="kleurenkiezer" value="lichtblauw">
        <label for="kleur_lichtblauw" style="background: #487eae;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_oudgeel" name="kleurenkiezer" value="oudgeel">
        <label for="kleur_oudgeel" style="background: #b79130;"></label>
    </li>
    <li>
        <input type="radio" id="kleur_zwart" name="kleurenkiezer" value="zwart">
        <label for="kleur_zwart" style="background: #000;"></label>
    </li>
</ol>

我想做的是让用户看不到实际的单选按钮，并使标签可点击，这样我就有了一个整洁的彩色方 block 列表，您可以从中选择一个。现在我的单选按钮似乎没有被选中。为什么会这样？

我的CSS:

.kleurenkiezer {
        width: 165px;
        margin-left: -10px;
        float: right;
    }

.kleurenkiezer li {
    position: relative;

    width: 45px;
    height: 45px;
    margin: 0 0 10px 10px;
    border: 1px solid #bbbbbb;

    float: left;
}

.kleurenkiezer li input {
    position: absolute;
    top: 10px;
    left: 10px;

    z-index: 1000;
}

.kleurenkiezer li label {
    position: absolute;
    top: 0;
    left: 0;

    width: 43px;
    height: 43px;
}

最佳答案

真正老问题的新答案.. :) 不确定这是你的情况，但我在点击页面上的标签时遇到了同样的问题，其中有 2 个重复的表单，其中 2 个始终隐藏。一个用于移动设备的页面区域，另一个用于桌面设备。

首先出现在 html 流程上的一个工作正常，另一个没有。假的例子，看 js fiddle:

<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>


<input type="radio" id="value-1" name="sort"/>
<label for="value-1">value 1</label>
<input type="radio" id="value-2" name="sort"/>
<label for="value-2">value 2</label>

https://jsfiddle.net/stratboy/8ua16gm3/1/

所以现在，对我来说，这里的诀窍是找到一种方法来避免表单重复。

关于html - 单击标签不检查单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17699290/

html单击34labelgtcssforms

有关html - 单击标签不检查单选按钮的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 检查 "command"的输出应该包含 NilClass 的意外崩溃 - 2

    为了将Cucumber用于命令行脚本，我按照提供的说明安装了arubagem。它在我的Gemfile中，我可以验证是否安装了正确的版本并且我已经包含了require'aruba/cucumber'在'features/env.rb'中为了确保它能正常工作，我写了以下场景:@announceScenario:Testingcucumber/arubaGivenablankslateThentheoutputfrom"ls-la"shouldcontain"drw"假设事情应该失败。它确实失败了，但失败的原因是错误的:@announceScenario:Testingcucumber/ar

  3. ruby - 在院子里用@param 标签警告 - 2

    我试图使用yard记录一些Ruby代码，尽管我所做的正是所描述的here或here#@param[Integer]thenumberoftrials(>=0)#@param[Float]successprobabilityineachtrialdefinitialize(n,p)#initialize...end虽然我仍然得到这个奇怪的错误@paramtaghasunknownparametername:the@paramtaghasunknownparametername:success然后生成的html看起来很奇怪。我称yard为:$yarddoc-mmarkdown我做错了什么？

  4. ruby - 检查数组是否在增加 - 2

    这个问题在这里已经有了答案:Checktoseeifanarrayisalreadysorted?(8个答案)关闭9年前。我只是想知道是否有办法检查数组是否在增加？这是我的解决方案，但我正在寻找更漂亮的方法:n=-1@arr.flatten.each{|e|returnfalseife

  5. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  6. ruby - 检查方法参数的类型 - 2

    我不确定传递给方法的对象的类型是否正确。我可能会将一个字符串传递给一个只能处理整数的函数。某种运行时保证怎么样？我看不到比以下更好的选择:defsomeFixNumMangler(input)raise"wrongtype:integerrequired"unlessinput.class==FixNumother_stuffend有更好的选择吗？ 最佳答案 使用Kernel#Integer在使用之前转换输入的方法。当无法以任何合理的方式将输入转换为整数时，它将引发ArgumentError。defmy_method(number)

  7. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  8. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

    我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

  9. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  10. ruby - 检查日期是否在过去 7 天内 - 2

    我的日期格式如下:"%d-%m-%Y"(例如，今天的日期为07-09-2015)，我想看看是不是在过去的七天内。谁能推荐一种方法？ 最佳答案 你可以这样做:require"date"Date.today-7 关于ruby-检查日期是否在过去7天内，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/32438063/

随机推荐