Use CSS to Inform Users of Interactivity
There are certain cues that users are looking for to be informed that elements are interactive, like hover states and cursor changes. In this video, I make a list of radio button labels easier to identify as interactive and style them to react to user behavior.
[00:00] Let's go ahead and style filters down here. Let's inspect it and see what classes we have. We've got the fieldset is filters, but then we've got labels inside with the class of filter, and then we've got radio with filter radio, and span with filter label, with modifiers for individual labels, they're all active and complete.
[00:22] Let's start by staying the main container, which is the fieldset and the class is set to filters. If we look at the design, we need to add a dark blue to this background and let's change the height to 80 pixels so it looks like the other items, and it will have a nice flow.
[00:37] We're going to set the box sizing to border-box, which lets us mess with the padding without messing with the total height. We'll set the color of the text to be a lighter color so that it's easier to see. We'll use a box-shadow to give it a little bit of depth and contrast from the rest of the list.
[00:59] Then let's set the padding which will allow the content inside to be aligned in the correct place, and the width, if we set to 100 percent, it'll go right to the edge, we want it to go a little bit past, so we'll use calc and add 20 pixels on top of that.
[01:14] Then the font-weight we're going to change that to something a little bit bolder, make it a little bit easier to see as well on that dark background. We need to get rid of the border that's there by default with the browser stylesheet.
[01:26] Then we'll change the border-radius, just on the top two corners to kind of round it out a little bit. The filters container is styled well, so let's go ahead and style some of the children. The title and the filters are going to share some properties, so let's go ahead and add them both to the selector.
[01:50] We're going to set the display to inline-block so that it will flow from left to right. We could have done this with flex-box, but it works just as well with a little bit less code this way, and just because we know flex-box doesn't mean we have to use it everywhere.
[02:02] Let's set the margin right to 30 pixels, and that will space them out nicely. Now the difference between the title and the individual filters is that they are interactive, so we're going to set the cursor to pointer to make that a little bit easier to tell.
[02:17] Now we have three different filter labels, each with a modifier to allow us to style them individually, but they still share some properties, so let's use the attribute selector for the class name and target classes that start with filterlabel, using this regex like expression.
[02:31] Then we're going to set the position to relative, so we can position their children absolutely relative to each individual filter. We're going to set the display to inline-block, that's not really necessary, but it will work.
[02:44] Then padding we'll set on the left to 16 pixels so that we have a little bit of room for the icons on the side of each filter, and we'll set the color to differentiate them from the actual filter title.
[03:00] That subdued color also allows us to add a hover state, where we can change the color to be a little bit higher contrast, also helps communicate that these things are interactive when they hover over them.
[03:19] Here we get to use a really fun selector, so when the radio button is checked, we want the color to also change a bit so that you can notice which of these filters you have selected. We're going to use a sibling selector for when the radio button is checked to change the actual filter label.
[03:40] We're going to set he color to full white which will provide lots of contrast. Now we have a fully functional set of filters, with styled individual filter items, and the title, and actually the container, but since the time of recording this video the browsers have changed the way they handle layout.
[03:55] If you tried to do this exact example in a current browser, it wouldn't look just like this. They changed the way fieldsets and legends work out, and I was considering rerecording the whole thing, but I figured this is actually pretty real-world example of what it's like to be a Web developer, and I really shouldn't try and hide that.
[04:11] Legends right now are kept out of the layout flow, and you can't use flex-box reliably for fieldsets, right now. There is a workaround, and that is to set float-left on the legend itself, and everything fits back into place.
[04:25] This is just normal Web development, we need to be checking what we're doing, and seeing how browser updates are changing and affecting the way that we're thinking about things.