How to stylize Radio buttons in HTML form-part2

How to stylize Radio buttons in HTML form-part2


Now all we need to do, we need to do something in an order to create this kind of radio check-box into our project. So how to do it? now the basic trick is, we cannot change the default radio button properties as exhibited by the browser. So that is why, we will conceal those particular radio buttons those are practically maintaining some default properties and if we can customize this particular these particular label elements over here, then it is possible that we are getting practically this kind of display into our project. So that is why if we now get back to font style.css, and if we now set the property to….all those properties as specified by this form-holder; so we are now practically customizing this ‘form-holder’ element over here This is the div that we are talking about, ‘form-holder’; copy this thing; get back to ‘form-style.css’; paste it; now write down the property as…width; for say we are working with a 1000px of div; the padding of the element; it should be 10px; box-sizing… border-box..so we don’t need to make any kind of calculation. If we have turned on this particular command over here; the background property we are now setting it to…for say this one… and we are now putting a margin-property of 0 auto condition. First of all get back to your project and reload and you can see that this will be… the result; all those radio buttons those are practically gathered into the central position of your webpage and for say for sake of simplicity let’s assume that we will be creating another input type here which is known as ‘submit’ and the value will be… ..’submit now’. Reload and everything is in order; now all we are going to do in this ‘form-style.css’; in the next case …we will be concealing the particular radio buttons those been created over here; so all we are going to do, the input element which has a type of ‘radio’ here those will be concealed; that means, the display will be… none. There it goes. Reload and you can see that all those particular ‘radio’ buttons those are off from the screen. We can’t see it; All we can see now is just, all those label elements those we have created so far. So, in the second case, let’s get back to ‘form-style.css’; here Let’s customize these label elements those we have created so far.. This is the background color… Let’s assume that the color will be… …white color… Let’s provide this padding of 10px; and an individual width of 100px.. This is the radio element; we had concealed those radio buttons so, for the moment, if we reload we can see that this will be the result over here; Now all we are doing over here we are practically creating this ‘form-holder’ input…we will have to specify the ‘type’; which type? which has a radio type. All being checked the immediate label element; the ‘immediate label’ element means? if we check this particular radio element over here which has a label of ‘Pankaj’; then this is the immediate label element of this particular radio button over here So we are practically specifying that this particular label element which is immediate to the adjacent selected radio button, it will be having some style properties over here; so what kind of style properties it should execute? It should be having a background color of, for say, white and the color… of… a little bit… of dark ash color; let’s get back to our project and see what is the result; so we can see that in the first case ‘Pankaj’ was the one which was selected over here; which is always checked in case of the first time when the page is being loaded. So that is why ‘Pankaj’ is now selected in this particular order; rest of this label element those practically remain unselected and that is why they are exactly displaying all those properties here we have set these properties in case of these label elements that it’s background should be…this one, the color will be white; it will be having a padding of 10px and a width of 100px; so everything will be right over here; in that particular case, we can see that this will be the result; and on the other hand we set the display of this particular…. label element will be inline-block. If we now reload, we can see that this will be the result over here; we may set this particular … input type submit button to come down into a separate line…so this will be the result so far. In the previous case, we have defined a div class of ‘form-holder’ that we had customized over here; there it goes. Then we had provided an input type with ‘radio’ button; so we had stated that any element inside this particular ‘form-holder’ which has a type of radio, it will be having a display of none. In the next case, we have turned off the display of this particular radio element; so now we are customizing that label element over here; what will be the properties of these particular label elements? It had been defined in the next line of syntax. We had defined that any label element which is practically aligning into this particular ‘form-holder’, it will be having all those properties over here. And in the last case, we have defined that any input, which has a ‘type’ of ‘radio’ inside this particular div class; on being checked, the immediate label element against this particular input type selected input type radio button, it will be having a background color of white and it will be having a color of #666; This is what we had defined over here. And that is what is being exactly executed here; you can see that all those label elements those are practically being selected those are having a different background color and a different font-color. Reload; in the first case, let’s have another test. Get back to font -style.css and in case of this ‘form-holder’, input type radio, just turn it off; there it goes; get back to your project and reload, and you can see that this particular radio item it has been selected against ‘Pankaj’ label element it is selected; so that is why the immediate.. label element of ‘Pankaj’; it is now having a different background color and a different font-color. If you select this ‘Arman’ you can see that the same change is been observed over here; in case of ‘Dhiman’; same thing been shown over here in case of ‘Oni’, the same thing is been shown over here. All we did we just concealed this particular radio button those we cannot stylize those been defined as default property for a particular individual browser. So, we are now uncommenting this particular ‘display: none’ property. Get back to your project and reload and you can see that this is the result. So we have successfully stylized our radio button element; hope this will aid you into your project in practically creating something new something innovative in your project. Hope you guys have liked this tutorial; if you guys have liked this tutorial then do not hesitate to hit that particular red subscribe button. Thanks for watching us, until next, Good bye…

Leave a Reply

Your email address will not be published. Required fields are marked *