css - 有没有办法使用 CSS 隐藏单选按钮？

Question

我有一项关于 Qualtrics 的调查，我想找到一种使用 CSS 隐藏单选按钮的方法；这可能吗？

谢谢！

Answer 1

如果你想隐藏所有单选按钮，那么你可以使用

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

如果您只想隐藏一些单选按钮，那么您必须为它们提供一个 css 类，例如“hiddenRadioButton”，这个 css 类是

.hiddenRadioButton{ display:none; }

编辑：[input type="radio"] {display:none}应该是input [type="radio"] { display:none; }

Answer 2

根据您想要实现的目标，有几种隐藏内容的方法：

• 隐藏是因为你不需要它，或者当满足某些条件时你会从 js 中显示它。为此，您应该使用display: none;. 该元素不在 DOM 中。

• 隐藏，因为你会做一些疯狂的黑客，例如。因为你很懒，不想修改 POST 或在后端处理日期。然后你应该使用visibility: hidden;DOM 中的那个元素。

• -hide 因为你想以不同的方式设置它（而愚蠢的 :D 浏览器不允许你这样做）。不推荐这天，因为有这么多设备以许多不同的方式运行，这会导致一些问题，例如。在移动设备上（当然并非总是如此）。为此，您应该使用opacity: 0;. 它们在页面上呈现在它们应该出现但不可见的位置。

我个人最喜欢的：

.container{
  overflow: hidden;
  position: relative;
}

.hidden-stuff{
  position: absolute;
  top: 0;
  right: 0;
  font-size: 30rem;  
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

css ninja http://www.thecssninja.com/css/custom-inputs-using-css有一种很好的方式来设置单选按钮

Answer 3

如果要隐藏某个单选按钮，请使用以下命令：

HTML：

<!-- Example with two radio buttons -->
<input type="radio" id="first-button" name="button"> <input type="radio" id="second-button" name="button">

CSS：

#first-button {
    display: none;
} 

如果你想隐藏所有的单选按钮，那么用户 Vecihi Baltacl 的答案将不起作用，你需要使用这个 CSS：

input[type="radio"]{
    visibility:hidden;
}