Create Styled Radio Groups - CSS Tutorial

hey guys hey going today I'll be showing you how to create a custom radio group using pure HTML and CSS so we're going to be creating a design that looks something like this so I'm sure many of you have seen a design like this on the web before it's quite easy to use you simply choose an option and that right there is going to be your now selected option so it's very easy to do using pure HTML CSS there's no need for any JavaScript in order for this to work so let's go inside this tab right here and begin from scratch so inside the text editor we're going to firstly go inside the body and make a new div with a class of radio and this dip right here is going to be the main container for each one of our options so now we're going to be taking advantage of the actual HTML input with a type of radio so for our first option let's say input with a type of radio with a name of something like my radio and an ID of my radio number 1 so obviously for each one of your options the name should stay the same but the ID should change per option we're also gonna give this a value Oh for example we can just say option number 1 and also a class and this class is going to be ready underscore underscore input okay and the type needs to remain so that right there is out is our whole input for the first option okay and we're also going to be just say no we're gonna be hiding this by default with CSS later on but anyway let's move on to just putting our label and this for is going to be for my radio number 1 so of course this for attribute here needs to match up with the ID that you specified right there in the label we're gonna say for example option number 1 so now we also saw you also need to add a class here and this class is gonna be radio underscore underscore label so now that is all the HTML that is required for a scene option so saving this and then refreshing it gives us something like this so as we can see if I was to press on the label we can see that by pressing on the label the the actual radio button gets selected so we are going to be hiding the actual video input so let's just go back inside here and we're just going to be duplicating these two for that one twice more to make three options so we're gonna say in my video and do my video number two and then option two for the value also and the same thing down here so option at number three my video number three and of course option three so now saving this and refinishing it gives us something like this so now let's move on to the CSS in order to make it look something like this so inside the style tags let's firstly just add a bit of a margin on the actual body for some space around the corners let's just say 20 pixels okay let's also go down here and firstly target the radio container class and we're going to give this a display of inline flex the reason for the flex is so that we can easily position each one of our options in a row okay we're also gonna say overflow and make of this hidden and a border radius of 15px so the reason for this overflow of hidden is so that the border radius is always going to be displayed if you don't use this right here then your radius may not be displayed depending on how your elements inside here are styled but anyway let's also say a box shadow we're going to make this a zero zero five pixels and then rgba 0 0 0 and then 0.25 for a 25% opaque box shadow so now saving this and refreshing it gives us something like this as we can see the main container is basically complete or it is complete and we can move on to the actual video it labels them or each one of these options okay so back inside here let's firstly just hide the default input so we can say radio underscore underscore input give this a display of none and that is all for the input so now of course this will now give us no actual HTML input fields um so now it's just gonna be a bit styling up each one of these options so that they look like this so back inside here let's target the radio label class we're gonna give this firstly some padding of 8px top and bottom and 14 for left and right a font size of 14 px and a font family of sand surf of course if you're using a custom font you can change this to be your own font let's give a text color of white and a background of hash 0 0 9 5 7 8 that is the color of dqo or the decode green color also down here we're gonna say cursor and make this pointer that way we're gonna get a cursor sorry am a pointer cursor when hovering over it and also down here a transition for the background at 0.1 seconds because if you noticed back inside the example when I press on this we can see there's a slight transition for the background color when it gets selected so anyway saving that and refreshing here and gives us something like this so we're almost done so now it's gonna be about just putting a border between each one of these options so back inside here let's do a selector that looks something like this we're gonna say radio underscore underscore label okay then we're gonna say : not and then we're gonna say last of type so this right here is gonna select every single label that is not the last of its type so basically we're selecting this one here and this one here okay so for this we're going to say border - right and we're gonna say 1px solid and then I'm going to be using a darker shade of my decode green color that's going to be zero zero six and then B five six off-course a darker shade of this one right here saving this and refreshing it gives us something like this so not bad so now we can move on to the final part of this video and that is gonna be making it so when you press on this it is going to change the background color so back inside here let's go down here I'm gonna say radio input okay so targeting the actual input class then we're gonna say : chips so basically we're saying when the radio input this guy right here when this gets checked or selected then we're gonna say plus then we're gonna say dot radio underscore underscore label so for this right here is the adjacent sibling Combinator and basically it just means that we're gonna be selecting the next sibling with this class right here a radio a label in the context of an input like this the next sibling or with that class is gonna be the next one right down here which is the label so we're gonna be selecting this label right there when this one gets selected and for this we're gonna simply say background I'm gonna make this hash zero zero six and then B five six the exact same color which are used for the border just up here so now saving this and refreshing it gives us this right here I can now choose an option and it works perfectly fine so I don't want to say that the reason why this works and the reason why the radio input gets say our checked state is because these right here are labels and since this label belongs to this input it actually gets selected behind the scenes I can prove this by going up here and removing this display:none on the actual input save this and refresh and we can see now each one of these inputs have not been selected if I was to press on the label we can see get selected right there so that's how it works very easy to do using pure HTML and CSS and there we go to create a custom radio group thanks for watching guys and I'll see you later

Channel: dcode

Views: 20,340

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, website, design, app, html, html5, css, css3, style, styling, stylesheet, input, field, form, post, get, radio, buttons, button, choice, list, submit, customize, customise

Id: GDh9uToZkYg

Length: 8min 56sec (536 seconds)

Published: Mon Jan 06 2020