我有以下代碼，我在 codepen 上找到了它，并且看起來很棒！
.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked label {
background-color: #a5dc86;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}<form class="form">
<div class="switch-field">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
<label for="radio-three">One</label>
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
<label for="radio-four">Two</label>
<input type="radio" id="radio-five" name="switch-two" value="no" />
<label for="radio-five">Three</label>
</div>
</form>但不幸的是，我生成的 HTML 布局如下（標簽內有輸入）：
<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>
我想知道是否可以僅使用 CSS 來調整此類以使其作業，或者是否需要 JS。
.switch-field input:checked label {
background-color: #a5dc86;
box-shadow: none;
}
提前謝謝了！
uj5u.com熱心網友回復：
你應該使用 JS。
當輸入元素在標簽內時，我們不需要元素上的 id 和標簽上的“for”屬性，但是當它在標簽外時，我們需要它。
<label>
Foo
<input name="foo" type="checkbox" />
</label>
根據您的 HTML 代碼，要更改標簽的樣式，需要一個影響父級的選擇器，這目前是不可能的。為什么？https://css-tricks.com/parent-selectors-in-css/
<input id="foo" name="foo" type="checkbox" />
<label for="foo">Foo</label>
因此，要選擇 :checked 輸入的標簽，我們需要標簽相鄰，而不是父標簽。
但是在您的代碼中，HTML 的標簽和輸入是隱式連接的。所以我認為解決方案是使用JS。
let form = document.querySelector("form");
form.addEventListener("change", (event) => {
let target = event.target;
let targetParent = target.parentElement;
if (
target.type === "radio" &&
targetParent &&
targetParent.tagName.toLowerCase() === "label"
) {
let prior = form.querySelector('label.checked input[name="' target.name '"]');
if (prior) {
prior.parentElement.classList.remove("checked");
}
targetParent.classList.add("checked");
}
}, false);.switch-field {
display: flex;
margin-bottom: 36px;
overflow: hidden;
}
.switch-field input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.switch-field label {
background-color: #e4e4e4;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
line-height: 1;
text-align: center;
padding: 8px 16px;
margin-right: -1px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.1s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field label.checked {
background-color: #a5dc86;
box-shadow: none;
}
.switch-field label:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field label:last-of-type {
border-radius: 0 4px 4px 0;
}<form class="form">
<div class="switch-field">
<label class="checked">
<input type="radio" name="switch-two" value="yes" checked />
One
</label>
<label>
<input type="radio" name="switch-two" value="maybe" />
Two
</label>
<label>
<input type="radio" name="switch-two" value="no" />
Three
</label>
</div>
</form>uj5u.com熱心網友回復：
以下是如何通過 javascript 實作所需功能的示例
var checkboxes = document.querySelectorAll("input[type=radio]");
var labels = document.querySelectorAll("label");
labels[0].classList.add("checkedLabel");
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('change', function(e) {
Array.from(labels).forEach(function(el) {
el.classList.remove('checkedLabel');
});
this.parentElement.classList.add("checkedLabel");
})
}).checkedLabel {
background-color: #a5dc86;
box-shadow: none;
}<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>uj5u.com熱心網友回復：
唯一可能的 CSS 解決方案
偽選擇器:focus-within。如果一個元素有任何具有焦點的子元素，則該父元素將應用樣式。因此，用戶檢查的單選按鈕將觸發焦點事件，并在此程序中激活 CSS 規則集，該規則集具有:focus-within以下示例中的標簽。
.switch-field label:focus-within {
background-color: #a5dc86;
box-shadow: none;
}<form class="form">
<div class="switch-field">
<label for="radio-three">
<input type="radio" id="radio-three" name="switch-two" value="yes" checked/>
One</label>
<label for="radio-four">
<input type="radio" id="radio-four" name="switch-two" value="maybe" />
Two</label>
<label for="radio-five">
<input type="radio" id="radio-five" name="switch-two" value="no" />
Three</label>
</div>
</form>uj5u.com熱心網友回復：
是的，替換.switch-field input為.switch-field label input.
形式x1 x2 x3 ... xn—1 xn（空格分隔）的選擇器表示xn它是等的后代xn?1。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/425168.html
標籤：javascript html jQuery css 形式