Move Initials Radio Button with airSlate SignNow

Style radio notice

[Music] for this video i'll show you how to customize an html radio buttons and share with you some techniques you can use to style any html core elements like this as well as how you can use transitions to create powerful animations i have here two radio buttons one of them checked and both have name of sample and the way radio buttons work is you link them with the same name so only one can be checked at a time and if i break this link by making the name different notice i can have both of them checked the hard thing about radio buttons is you can style them directly and these do not look bad but the way it looks will vary from browser to browser and what you may want is for them to look the same in any browser i can certainly change their size with width and height but if i try to change their color with color or background i fail when i inspect them i don't have much to work with so i need to find a way to style them the first thing i do is wrap them in a label tag and i'll add a span tag of class check mark but the reason you wrap input field in a label tag is to associate the label with the input and when you wrap it you don't need the for attribute on the label since the association is implicit this means that when you click on the label it triggers the action on the input field like focus and in this case the check action i'll duplicate this and proceed to style it i have here a basic body style and this is what is making the field stay center on the right side here i'll first make this custom radio button 25 by 25 border of two pixels solid line of a dark ashy gray i will distance them with margin left and since the width and height are the same i'll turn them into a circle with the border radius 50 for the check mark i'll first add a simple style so we can see them and it's important to set display inline block because spam tags are inline tags and you can't give inline element a size then when the input is checked i'll target the adjacent element in this case the check mark and make it display inline block so i'll make sure there are display none first and notice now that only the one checked is shown i'll make the input field display none now and it continues to behave like before even hidden i believe only few fields give you this effect of even hidden you can control the behavior i've tried this with radio buttons checkbox and file input field so far which are common input fields people wish to give custom styling now that we got the behavior unlocked let's continue...