Creating Custom Select Boxes with HTML and CSS: A New Browser Specification

creating custom select boxes like these used to require a lot of JavaScript time thirdparty code and so on but what if I

told you every single one of these select boxes you're seeing is built directly using only HTML and CSS that's

because there's a brand new browser specification coming through that allows you to create entirely custom select

boxes using just HTML and CSS and it's incredibly powerful and flexible honestly it's something I never thought

I would see in the browser in this video I'm going to go through what this new specification looks like what you can

expect and when you can start using it welcome back to web dev simplified my name is Kyle and my job is to simplify

the web for you so you can start building your dream project sooner and to get started with these custom select

elements as you can see over here this is the custom select element that I've created and this is the code that you

need to do it it's honestly not that much code so if we take a look at the HTML it's rather straightforward we

create a select element just like we normally would but the main difference is that now inside of our options

instead of just giving them a specific actual value inside here of like USA we're now giving it HTML that it can

actually render out and we have this special custom HTML element called selected content this is a built-in HTML

element built into the browser with this new select specification which just gives you the HTML inside of whatever

your selected option is so if I select United States it's going to give me the options right here all that HTML

directly inside of United States so this is all we need to do to create this custom select really it's just create a

bunch of options with some HTML and put this selected content inside here and I can even add stuff before this for

example you can see that shows up beforehand if I want so it's entirely up to you how you customize what this looks

like now the more interesting part comes into the CSS so if we look at the CSS it's really not that complicated first

of all we have a select as well as this picker select so what this does this select tag right here we're changing the

appearance to base select all that means is that we're taking the normal browser based styling for select element and

we're converting it to our own custom HTML select so if I remove this and I just give this quick save you can see it

just renders a normal HTML select element so the nice thing about this is everything gracefully falls back so if a

browser doesn't support this or if you're not using this appearance tag everything just works like a normal

select element but as soon as we add this what it does is it replaces the browser's built-in Styles and it

replaces them with their own custom styles to kind of give you an idea of what that looks like here are two select

elements this is just a boiler plate basic select element and this one over here is the base style so like the new

styles of what this select element looks like if you just change the appearance and nothing else now the second part

here is this picker section essentially when you have your select Box open this bottom section the drop down that is

considered the Picker so essentially I'm saying I want to change what that drop down looks like to also have it be based

on my new select option styling now if we look at our actual important Styles here we have this selected content and

option style all that's doing is it's styling what my options look like and what the selected content up here looks

like so I'm just making it display Flex with a gap between them so that I have a little bit of space between my different

elements on each of my options I'm giving them a little bit of extra vertical padding my country name I'm

changing the style on slightly I'm adding in this flag image and giving it a specific width and height and then

finally here I have this option check mark if I remove this by default all of these different selects will have a

check mark on the left hand side for accessibility purposes but most of the time you probably don't want that so I'm

actually disabling that by default just to remove that default checkbox from these marks now instead I'm replacing

that with this option checked so whichever one of these options is currently selected it's going to have

this nice light blue background as you can see as I change it gets that nice light blue background between all of

them now this right here is pretty much the most basic version of how you do this select all you do is you create

your select with all your HTML you want you make sure you use this selected content HTML tag and then you want to

make sure you change the appearance to be base select for both the drop down as well as the select element and from

there you can just style things however you want that's essentially how all these different selects that I were

showing in the intro of this video happened for example this select right here is the exact same thing we just

have our custom drop down and we're just changing around what everything looks like same thing here for this currency

selector and then finally for this selector right here again we're just changing on what everything looks like

now this is a specification that's very well detailed inside of this blog right here I'll scroll to the top here this is

the request for developer feedback on the customizable select on the Chrome for Dev blog I'll link this in the

description one thing to note about this blog in particular is it is slightly out of date for example I scroll down to

this section which is the most important section telling you what each thing does you'll notice here it's called selected

option an option before while as we looked at our code you can see this is called selected content and this is

option check mark so there's a few things that are slightly out of date what I would recommend doing at the very

top of this blog article they have a link here that brings you to the code pen collection click on that link and

that's going to bring you to an updated version of all these different code pens that have everything that I've showed

you in this video so that would be what I recommend also if you want to use this feature currently you need to do it

inside of the canary version of Chrome and enable the experimental web platform features now this feature is currently

in stage two which means that most likely there's not going to be a ton of changes to the API but obviously as

you've seen there have been some changes to the API from when I created this video to when that blog article is

written so there are some changes that could happen but for the most part it's probably going to be pretty similar to

what I've shown you here and again the really nice thing about this is it has a graceful fallback for example if I open

this inside of Google Chrome normally you can see this is a normal Google Chrome instance it doesn't support any

of this fancy stuff you can see it still works just like a normal select box so the really nice thing is you can start

using this immediately and even if a browser doesn't support it it's still going to show you the default select box

and then as soon as you get a browser that does support it you're going to get all these really extra fancy features

now if you enjoyed these more bleeding edge Style videos where I cover the latest and greatest Insight of CSS HTML

and JavaScript you're going to love the videos right over here one of them talks about the anchor position and how it's

absolutely amazing inside of CSS it's my favorite thing coming to CSS I highly recommend checking that out with that

said thank you very much for watching and have a good day