-1

I’m brand new to coding and a project I’m working on in class is a registration form. It needs to have an input for “Male” or “Female” that looks like a toggle. I assumed it is a radio button that’s made to look like a toggle in CSS but from what I’ve read the workarounds are very complex to do that, or you need to use JS or something that we haven’t learned yet. I think I’m close on the rest of it but I can’t get that male/female input!

what I’m tasked with replicating:

enter image description here

ThS
  • 4,597
  • 2
  • 15
  • 27
RT Solo
  • 3
  • 2
  • The picture is of the example we are given to try to replicate, so you can see the male/female input toggle switch checkbox radio thing. – RT Solo Mar 14 '21 at 23:17
  • 1
    Does this answer your question? [How to make a radio button look like a toggle button](https://stackoverflow.com/questions/5523735/how-to-make-a-radio-button-look-like-a-toggle-button) – Leo Mar 14 '21 at 23:51
  • I don’t THINK so...I saw that one last night and tried to copy and paste that reply but I’m not sure what bootstrap is and couldn’t get it working. I just now saw that other smaller html css ONLY answer below that so I will try to implement that when I get home. Just seems like at this level there should be some really basic way to accomplish this since we’ve only learned the most basic of skills so far – RT Solo Mar 15 '21 at 00:15
  • There are pure CSS solutions (a lot of answers) in the question I linked. Read it, it will help you. – Leo Mar 15 '21 at 00:23

1 Answers1

0

I assumed it is a radio button that’s made to look like a toggle

You're right (at least to think of using radio buttons), these are two inputs of type radio with an associated label for each one that are (the labels) styled using CSS.

To be short, here's a live demo of the end result :

.wrapper {
  display: flex;
  padding: 4px;
  background-color: #24ef43;
}

.custom-input {
  flex-grow: 1;
}

.custom-input input[type=radio] {
  display: none;
}

.custom-input label {
  display: block;
  padding: 6px 8px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  transition : all .4s 0s ease;
}

.custom-input input[type=radio]:checked + label {
  background-color: #f5f5f5;
  color: #000;
  border-radius: 4px;
}
<div class="wrapper">
  <div class="custom-input">
    <input type="radio" id="female" name="gender">
    <label for="female">Female</label>
  </div>
  <div class="custom-input">
    <input type="radio" id="male" name="gender">
    <label for="male">Male</label>
  </div>
</div>

Disclaimer: I tried to be as short as possible in my answer, also wanted to put the OP on the track thus I didn't use any best practices or patterns nor give attention to accessibility in the code above. Also, I didn't make any clarifications about the code being used so it up to the OP to ask for any further assistance and am glad to provide some help.

ThS
  • 4,597
  • 2
  • 15
  • 27
  • This is the code I've written so far: CSS = – RT Solo Mar 15 '21 at 01:40
  • sorry it said way too many characters when I tried to paste my css in to show you what I've got. That being said, wow that code did put the kind of toggle in that I'm looking for! Thank you. Now I'll try to follow it to understand how it does what it does. I've matched the background color. Now I need to figure out how to have it start with one of the options checked. I see in the css where it states "checked" so I will look into that and try to figure it out. Thank you SO much for the help! – RT Solo Mar 15 '21 at 01:48
  • So I was looking at the css code you wrote for the radio toggle. This is what I think is happening: you are hiding the actual input (the circle that gets filled) using display:none, and only showing the labels which are are styled to look like a toggle. The user still selects the radio input by clicking on the label, so it’s still functional as a radio. Is that right? I appreciate any help as I am struggling to learn some of these Web Dev concepts. – RT Solo Mar 15 '21 at 04:33