html CSS -如何样式一个选定的电台广告标签?

uqxowvwt  于 2023-11-15  发布在  其他
关注(0)|答案(9)|浏览(116)

我想为单选按钮的选定标签添加样式:

HTML:

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked>All</label>
 <label><input type="radio" value="false">Open</label>
 <label><input type="radio" value="true">Archived</label>
</div>

字符串

CSS

.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
    background:Red;
    border:1px solid green;
    padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked { 
    background:pink !important;
}


知道我哪里做错了吗

olqngx59

olqngx591#

.radio-toolbar input[type="radio"] {
  display: none;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #ddd;
  padding: 4px 11px;
  font-family: Arial;
  font-size: 16px;
  cursor: pointer;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #bbb;
}

个字符
首先,您可能希望在单选按钮上添加name属性。否则,它们不属于同一组,并且可以选中多个单选按钮。
此外,由于我将标签放置为(单选按钮的)兄弟,因此必须使用idfor属性将它们关联在一起。

kdfy810k

kdfy810k2#

如果你真的想把复选框放在标签里面,试着添加一个额外的span标签,例如。

HTML格式

<div class="radio-toolbar">
 <label><input type="radio" value="all" checked><span>All</span></label>
 <label><input type="radio" value="false"><span>Open</span></label>
 <label><input type="radio" value="true"><span>Archived</span></label>
</div>

字符串

CSS

.radio-toolbar input[type="radio"]:checked ~ * { 
    background:pink !important;
}


这将为选定单选按钮的所有同级设置背景。

mzaanser

mzaanser3#

当元素不是兄弟时,你使用了相邻兄弟选择器(+)。标签是输入的父元素,而不是它的兄弟元素。
CSS没有办法根据它的后代(也没有任何跟随它的东西)来选择元素。
您需要使用JavaScript来解决这个问题。
或者,重新排列标记:

<input id="foo"><label for="foo">…</label>

字符串

doinxwow

doinxwow4#

你可以在html和css中添加span。
这是我的代码中的一个例子...
HTML(JSX):

<input type="radio" name="AMPM" id="radiostyle1" value="AM" checked={this.state.AMPM==="AM"} onChange={this.handleChange}/>  
<label for="radiostyle1"><span></span> am  </label>

<input type="radio" name="AMPM" id="radiostyle2" value="PM" checked={this.state.AMPM==="PM"} onChange={this.handleChange}/>
<label for="radiostyle2"><span></span> pm  </label>

字符串
CSS使标准单选按钮在屏幕上消失并显示自定义按钮图像:

input[type="radio"] {  
    opacity:0;                                      
}

input[type="radio"] + label {
    font-size:1em;
    text-transform: uppercase;
    color: white ;  
    cursor: pointer;
    margin:auto 15px auto auto;                    
}

input[type="radio"] + label span {
    display:inline-block;
    width:30px;
    height:10px;
    margin:1px 0px 0 -30px;                       
    cursor:pointer;
    border-radius: 20%;
}

input[type="radio"] + label span {
    background-color: #FFFFFF 
}

input[type="radio"]:checked + label span{
     background-color: #660006;  
}

klsxnrf1

klsxnrf15#

只需使用label:focus-within {}来设置标签的样式,并选中单选框或复选框。

eqoofvh9

eqoofvh96#

这里有一个可行的解决方案

label {
  position: relative;
}

label input {
  position: absolute;
  opacity: 0;
}

label:focus-within {
  outline: 1px solid orange;
}

个字符

6ljaweal

6ljaweal7#

由于目前还没有CSS解决方案来样式化父类,我在这里使用一个简单的jQuery来添加一个类到一个标签中,并在其中检查输入。

$(document).on("change","input", function(){
 $("label").removeClass("checkedlabel");
 if($(this).is(":checked")) $(this).closest("label").addClass("checkedlabel");
});

字符串
别忘了也给预检查输入的标签给予类checkedlabel

fslejnso

fslejnso8#

正如TimStieffenhofer在他们的answer中提到的,最简单的方法是将输入字段作为标签的子字段,并在标签上使用:focus-within伪类。
如果你想隐藏你的单选按钮,并将输入设置为隐藏或不显示,这将不再起作用。解决方法是给予输入字段一个-1的z索引(或任何低于父标签的z索引)。

yjghlzjz

yjghlzjz9#

仅适用于超级渐进式开发者(注意:**:has**仍然支持较低!)

/* selector picks only labels that has checked input inside */
label:has(input:checked) {
  color: #f00;
}

个字符

相关问题