当单选输入=选中时,改变边框[重复]。


我得到了一个带图标的标签,它与一个输入 “连接”,多次,所以我的html看起来像。

<label for="gutschein" class="col-md-3 row border mx-md-auto p-3">
   <span class="col iconify" data-icon="mdi:credit-card-plus-outline" data-inline="false">Gutschein</span>
   <h5 class="col pt-3">Gutschein</h5>
</label>
<input type="radio" id="gutschein" name="betrag" style="visibility:hidden ;" />

<label for="spenden" class="col-md-3 row border mx-auto p-3">
  <span class="col iconify" data-icon="fa-solid:donate" data-inline="false"></span>
  <h5 class="col pt-3">Spenden</h5>
</label>
<input type="radio" id="spenden" name="betrag" style="visibility: hidden;" />

现在如果我点击图标,输入就会被选中,很好!但我需要给用户一个反馈,所以如果单选输入被选中,标签边框应该是红色的。

.gift_value {
            background: var(--blue);
            color: white;
            text-align: center;
            border-radius: 5px;
        }

我试过一些JS函数,但没有任何效果,我还试过在输入=选中时设置一个类,比如: gift_value:checked:after or gift_value:focus 徒劳无功.有什么特别的技巧吗?查一下代码 此处

解决方案:

如果你改变输入的顺序 labelinput 的元素,你可以使用 + 相邻兄弟姐妹组合选择器 来为相应的标签应用一个样式。

Html:

<input type="radio" id="gutschein" name="betrag" style="visibility:hidden ;" />
<label for="gutschein" class="col-md-3 row border mx-md-auto p-3">
    <span class="col iconify" data-icon="mdi:credit-card-plus-outline" data-inline="false">Gutschein</span>
    <h5 class="col pt-3">Gutschein</h5>
</label>


<input type="radio" id="spenden" name="betrag" style="visibility: hidden;" />
<label for="spenden" class="col-md-3 row border mx-auto p-3">
    <span class="col iconify" data-icon="fa-solid:donate" data-inline="false"></span>
    <h5 class="col pt-3">Spenden</h5>
</label>

CSS。

input:checked + label {
        background: var(--blue);
        color: white;
        text-align: center;
        border-radius: 5px;
    }

给TA打赏
共{{data.count}}人
人已打赏
未分类

TypeScript.Record<> 其中的值取决于键。Record<>其中的值取决于键值

2022-9-8 21:27:36

未分类

通过读取文本文件创建列表

2022-9-8 21:27:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索