- [Chris] Hi, I'm Chris Converse and in this episode,
we'll replace the standard radio buttons
in a html form with custom artwork
and we'llmaking use of a spreadsheet to do this.
Allowing us to customize the user experience
to match the design of our webpage.
So if you'd like to follow along,
download the exercise files and we'll be begin
by opening the html file in a text editor.
Now, once you have the html file open,
up in the head area, you'll see we have the link
to style the css, we're going to be opening
this style sheet file in a moment.
If we scroll down inside of the body area,
we have an article element, and then a form element
and then inside of the form,
we have each of our radio buttons.
The input field and then a label immediately following
and then a break tag.
Now I have a break tag here because I need
to have a line break before each new input
and since each of these elements has a display
type of in line, we don't have any way
to force these on separate lines.
However, we are going to be removing these.
Now inside of the radio buttons themselves,
each radio button has an ID and the label
has a for attribute with the same name as the ID.
This gives us the ability
to click on the labels, for example.
So if I click on weekly,
this will activate the radio button.
Same thing with monthly and daily.
So now before we go over to the css,
let's come in here and remove the break tags.
We're going to be hiding the input fields
and replacing it with our own artwork
so we don't need to have the break tags here.
So once we have all of these removed,
save your html, you'll now see
that we no longer have the line breaks
and then we'll go back into exercise files.
Let's find style that css.
Let's open that in our text editor.
Now let's scroll down.
Let's find the form where it says input type = radio.
We have an outline set to none.
Let's come in here and add an additional property
of display and let's set that to none as well.
Save your css, go back to the browser and hit reload
and you'll now see that all of the radio buttons
are now not displaying.
So now let's go back to the css,
let's go into the form space label and let's come in here
and change some of properties for the labels.
First let's come in here and set a display type of block.
This will force each label to be on it's own line.
If your save your css and go back to the browser,
you'll now see that daily, weekly, and monthly
now show on their own lines.
Back into css, let's add another property, padding.
Let's set nine pixels on the top, zero pixels on the right.
10 pixels on the bottom and 45 pixels on the left.
This will give us room to place our custom art work.
Save your css, you can see the changes in the browser.
And then finally, let's come in here
and set a position property of relative.
This way when we position the art work inside of the label,
it will be positioned in relation to the label itself.
So now with that in place, let's come in here
and let's add a pseudo element so we can hold our graphic.
So type form space label, two colons.
Type in the word before, then add our brackets.
First property inside of our pseudo element
is going to be content, colon space.
Two ticks for a string and then a semi colon.
Next let's set a display type.
We're going to set this to in line block.
Next we'll set a width property.
We're going to set the width to 40 pixels.
Next we'll set a height property.
We're going to set this to 40 pixels as well.
Now let's come in here
and let's point to our spreadsheet graphic.
So we'll use the background property
and then for the first value, we're going to type URL
to bring in a background image.
So URL, parenthesis, then we'll put in images/
radio_button_art.svg.
Then outside of the parenthesis, we'll set a no repeat
and then we'll set a position x
of zero and a position y of zero.
Then a semi colon.
Next we'll come in here and set a background size property
and we need to set the background size
to be in proportion to the original spreadsheet.
So the spreadsheet that we have set up
is 100 pixels across by 300 pixels tall.
So the scale is down, I need to make sure
that the scale x is 1/3 of the scale y.
So for the width, we're going to set this to 40 pixels,
then a space, we'll set the height to 120 pixels.
Next we'll set a position property.
We'll set this to absolute to position
this inside of the labels.
Next we'll set a top property, set this to -1 pixels,
and then we'll set the left property to zero pixels.
So now with these properties in place, save your
css, let's go back to the browser.
We'll now see the first piece of art work
in our spreadsheet showing up here.
Which is the open pink circle
and it shows up inside of each one of the label elements.
So now let's go back to our css.
Let's add a hover state for our labels.
So form space label, colon hover.
Then we'll target the pseudo class inside of the label
so two colons.
Then type before, put it in our brackets.
And now let's come in here and let's set the background
position to zero for the position x
and -40 pixels for the y position.
Let's hit save, go back to the browser
and now when we hover over these,
we'll see the second piece of art work in the spread sheet.
Since we're shifting that
background graphic 40 pixels vertically
and now the last thing we need to do
is make this art work sensitive to
the checked state of the radio buttons.
Even though we have the display type set to none.
So back to our css, let's hit a few returns.
We'll start by typing form, then a space.
Then we'll type input.
Beginning and ending square bracket.
Then we'll set type equals two quotes.
Type in the word radio.
Then outside of the square brackets,
without a space, hit a colon.
Then type checked, then a space,
then we use a plus sign, then we'll add the label element.
Two colons and then we'll target the pseudo element.
So what the plus sign does is it selects the label
if it immediately follows the form
with an input type of radio in it's checked state.
And so if these conditions are true,
we're going to come in here and set the background position
to zero on the x and negative 80 pixels for the y.
And now before we test this,
I'm going to come over here and fix my typo.
This should be input, so with that in place,
hit save, go back to the browser.
When I hover over these, I see the second state
of the art work in the spread sheet
and then when I click on one of these,
we are now checking the hidden radio button
and because the label immediately follows that checked item,
we're now shifting the graphic -80 pixels.
So now we get the effect of our custom art work
representing the checked state of each radio button
and so now, if you'd like to learn more
about styling form elements,
check out this course entitled Styling Form Elements.
Which is also available here in the library
and so with that, I'll conclude this episode
and as always, thanks for watching.