Why Wrong Radio Button Is Selected By Default?

Folks,

When I refresh the page, I see the 2nd option selected when it should be the first! Why is that ?

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}
</style>
<body>

<h1>Gender</h1>
<label class="container">Nothing
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Male
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Female
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>
</html>

I do not see that happening when I attempt to replicate - https://codepen.io/ryanreese09/pen/JjPapgK

1 Like

I suspect this might be the cause.

When you say “when I refresh the page”… do you mean “when i refresh the page after having selected the second option”?

1 Like

Sorry for the late reply. Have not been logging on lately.
What I meant was, when I referesh the page and the page loads then by default the 1st option should be auto selected based on this code:

<label class="container">Nothing
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>

“Nothing” must be selected by default and not the “Male” or “Female” option. User must then select their GENDER.
Select any gender or not select any gender, as soon as the page loads, whether I load it for the first time or whether I refresh the page and reload it that way, the “Nothing” should be auto selected by default. “Nothing” is the 1st option. But that is not happening. When I CTRL R and the page loads, the 2nd option is selected by default.

Yeah my suspicion is that you’ve selected something and your browser is ‘helping’ you by remembering what you had selected previously, so that when you reload the page, it’s got that one checked.

What happens if you select the third option and refresh the page?

1 Like

Well, when I selected the 3rd option (FEMALE) and CTRL+R then by default the NOTHING got selected as it should. Tried a few more times and on every reload the NOTHING is not getting selected as it should but the FEMALE. You are right. The browser is remembering my selection and auto selecting it.
Is not there an html code to put an end to this auto selection by browser ? I use Fire Fox.

Maybe try reload skipping the cache: Sh+Ctrl+F5 ?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.