切换 HTML“微调器”输入的显示

Question

我找到了一种使用 CSS 切换 span 或 input 元素可见性的方法，基于是否选中了单选框（受此 question 启发）。

但是，一旦应用 jQueryUI 微调器格式，我就会失去这种切换效果。

这个jsFiddle 展示了 CSS 如何在span 元素上正常工作，但不适用于input。事实上，只要我应用微调器，整个 input 就会消失。

任何线索为什么会发生这种情况，以及如何使用 CSS 切换其可见性？

这是我在小提琴中使用的 CSS：

    /* Control visibility of SPAN and INPUT (with jqueryui spinner class)
cf. https://stackoverflow.com/questions/21269376/radio-button-show-hide-content
*/

/*The span works fine*/
span#some-text {
    display:none;
}
input#on-input:checked ~ span#some-text{
  display:inline;
}
input#systematic-input:checked ~ span#some-text{
  display:none;
}

/*The input is only visible when the spinner format isn't applied (i.e. commenting all CSS below this point). Even so, the hide/show effect doesn't work. Why?*/

/*
input#spinner-on {
    display:none;
}
input#on-input:checked ~ input#spinner-on{
  display:inline;
}
input#off-input:checked ~ input#spinner-on{
  display:none;
}
*/

Answer 1

jQueryUI 微调器将输入包装在一个 span 元素中。

将微调器输入包装在您指定的新范围中，并相应地应用 CSS。

span#spinnerWrapper {
     display:none;
}
input#on-input:checked ~ span#spinnerWrapper{
  display:inline;
}
input#off-input:checked ~ span#spinnerWrapper{
  display:none;
}

检查这个 jsFiddle

http://jsfiddle.net/scc0jyns/2/