[英]Can't get Toggle Switches to work in Asp.Net Webforms
我需要添加一個撥動開關,我可以從中讀取並設置來告訴我用戶是想要激活還是禁用它。
我有這個在多個不同示例中找到的 CSS
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
並使用這個 HTML
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
但是當我實際測試它時,它會像這樣呈現 HTML,這會導致切換開關不起作用Screenshot
標記為紅色的行是從某處添加的,如果我去檢查 chrome 中的元素,我只能看到它。 我不知道為什么會發生這種情況,如果我刪除有問題的行,那么撥動開關將按預期工作
我希望有人能解決這個困擾我很久的問題
在 CSS 中,下一個兄弟組合符 (+)用於設置.slider
跨度上的選中樣式。 如果在使用<asp:CheckBox ... />
而不是<input type="checkbox">
的示例中由ASP 控件生成 HTML,它將不匹配,因為input
和.slider
之間有一個 HTML 元素(所以沒有下一個兄弟姐妹關系),你也指出了這一點。 為了在這種情況下仍然獲得匹配,可以使用 后續兄弟組合器 (~)代替選中樣式的選擇器中的next-sibling combinator
器。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.