Is there a way to hide radio buttons using CSS? - css

Question

I have a survey on Qualtrics and I would like to find a way of hiding the radio buttons using CSS; is this possible?
Thanks!

Answer 1

if you want all radiobuttons hidden then you can use
input [type="radio"] { display:none; }
if you want only some radiobuttons hidden then you must give a css class for them for example "hiddenRadioButton" and this css class is
.hiddenRadioButton{ display:none; }
Edit: [input type="radio"] {display:none} should be input [type="radio"] { display:none; }

Answer 2

If you want to hide a certain radio button, then use this:
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;
}
If you want to hide all the radio buttons then User Vecihi Baltacl's answer will not work, you need to use this CSS:
input[type="radio"]{
visibility:hidden;
}

Answer 3

There are several way of hiding stuff it depending of what you want achieve:
hide because you don't need it or you will show it from js when some condition will be met. For this you should use display: none;. That elements are not in the DOM.
hide because you will do some crazy hack for eg. because you are lazy and you don want to modify POST or deal with date on backend. Then you should use visibility: hidden; that element are in the DOM.
-hide because you want to style it differently (and stupid :D browsers don't allow you to do that). This days is not recommended
because be have so many devices which behave in many different ways
that will cause some problem for eg. on mobile (of course not
always). For that you should use opacity: 0;. They render on page in place where they should be but are just not visible.
My personal favourite for this:
.container{
overflow: hidden;
position: relative;
}
.hidden-stuff{
position: absolute;
top: 0;
right: 0;
font-size: 30rem;
opacity: 0;
cursor: pointer;
z-index: 10;
}
There is nice way of styling radio buttons by css ninja http://www.thecssninja.com/css/custom-inputs-using-css