Switches disappear including chrome

Below in the stylesheet

 select,input ,td a {border:1px solid green; width:25%;height:25px;font-size:20px;margin-  left:.1em;}
input.myradio {border:none;width:0%;height:0%;font-size:0%;}

Below is the html

<td><input class="myradio"  type="radio" name="poolstatus" value="Add">Add</input><td>

This is fine in firefox, but chrome and IE don't show switches? Why is that?

+5
source share
4 answers

This is because you said that the switch is at 0% in height - 0px - which is not.

You can override this by specifying the height and width as β€œauto”, which will reset them (unless there is a rule that is more specifically elsewhere in the stylesheet)

input.myradio {
  border:none;
  width:auto;
  height:auto;
}
+7
source

My hunch is "width: 0%; height: 0%" in your input.myradio class. you need width and height.

Try the following:

input.myradio {border:none;width:1em;height:1em;}
+3

Why do you have the height and width set to 0% for them? I assume that is why IE and Chrome do not show the switch because they are 0 pixels in size.

+1
source

You need to put your switch in a tag <form>and they will appear in Chrome and IE:

<form><input type="radio" /></form>
-2
source

All Articles