{"$schema": "https://raw.githubusercontent.com/guitaripod/wwdc-sessions/master/schema/transcript.schema.json", "id": "wwdc2026-315", "language": "eng", "source": "https://developer.apple.com/videos/play/wwdc2026/315", "wordCount": 1523, "segments": [{"start": 7.0, "text": "Hi! I'm Tim, a Safari Engineer."}, {"start": 9.0, "text": "Today, I'm going to take you through a new way"}, {"start": 12.0, "text": "to use the select element that makes it completely customizable,"}, {"start": 16.0, "text": "while still reusing the power of semantic HTML."}, {"start": 19.0, "text": "As a web developer, you've probably wrestled with drop-downs."}, {"start": 22.0, "text": "Going beyond the default select element meant"}, {"start": 25.0, "text": "using heavy JavaScript libraries"}, {"start": 27.0, "text": "or lots of div elements."}, {"start": 29.0, "text": "Accessibility can also get tricky to handle."}, {"start": 32.0, "text": "Now, there's an easier way, all using just HTML and CSS:"}, {"start": 37.0, "text": "Customizable select."}, {"start": 38.0, "text": "Starting in Safari 27 and Chrome 135, you can use the pre-existing select element"}, {"start": 44.0, "text": "to seamlessly integrate your drop-downs into your website."}, {"start": 49.0, "text": "To see how it works,"}, {"start": 50.0, "text": "I'm going to implement customizable select"}, {"start": 52.0, "text": "on a website I'm building for a client."}, {"start": 55.0, "text": "I've been working with a photographer to build their portfolio"}, {"start": 58.0, "text": "so they can showcase and sell their photos."}, {"start": 61.0, "text": "My client wants some sorting and filtering options,"}, {"start": 64.0, "text": "for which I'll use the select element."}, {"start": 67.0, "text": "And yes, my client is also named Tim."}, {"start": 71.0, "text": "As a reminder, this is the HTML markup for the select element with its label."}, {"start": 76.0, "text": "The select element is a powerful tool,"}, {"start": 79.0, "text": "giving us basic accessibility right out of the box."}, {"start": 83.0, "text": "I'm able to use the keyboard to navigate option elements"}, {"start": 86.0, "text": "and it works well with screen readers, all without needing any external libraries."}, {"start": 91.0, "text": "I'll use that to build the Sort by button on my page."}, {"start": 94.0, "text": "This is the native select, which by the way,"}, {"start": 97.0, "text": "are called pull down buttons on Apple platforms."}, {"start": 101.0, "text": "What's great about the native select"}, {"start": 103.0, "text": "is it matches every other control on the platform,"}, {"start": 106.0, "text": "giving users a familiar way to navigate them."}, {"start": 110.0, "text": "But when I place my form control on my photo site,"}, {"start": 113.0, "text": "it feels a little out of place."}, {"start": 115.0, "text": "It doesn't quite blend into the style of my site the way I want."}, {"start": 120.0, "text": "This is where customizable select comes in."}, {"start": 123.0, "text": "I'll take you through the different steps of customization"}, {"start": 126.0, "text": "so that I get a select that better matches my design."}, {"start": 129.0, "text": "I'll start by styling the select buttons on my site."}, {"start": 132.0, "text": "The button is the part of the select element"}, {"start": 134.0, "text": "that I can click to show the select menu."}, {"start": 137.0, "text": "Then, I'll use customizable select to style that menu,"}, {"start": 140.0, "text": "which displays my options."}, {"start": 142.0, "text": "Finally, I'll show you how you can break away"}, {"start": 145.0, "text": "from the classic select element layouts"}, {"start": 147.0, "text": "with content that goes beyond just text."}, {"start": 150.0, "text": "Let's go back to our first item,"}, {"start": 152.0, "text": "I'm going to style the most basic part of the control, the button."}, {"start": 157.0, "text": "Starting from scratch, I get the native control."}, {"start": 160.0, "text": "But now, I can use the new customizable select appearance"}, {"start": 164.0, "text": "to get a smaller set of styles"}, {"start": 166.0, "text": "to change to match my site's design."}, {"start": 168.0, "text": "The first step is to apply — appearance: base-select."}, {"start": 172.0, "text": "Since I previously set up font-family: Gill Sans"}, {"start": 174.0, "text": "on the body element,"}, {"start": 176.0, "text": "the body font is now inherited by the select button,"}, {"start": 179.0, "text": "matching the label beside it."}, {"start": 182.0, "text": "That's already bringing me one step closer"}, {"start": 184.0, "text": "to matching the design of my site."}, {"start": 187.0, "text": "As a next step, I'll adjust the background, border, and padding."}, {"start": 191.0, "text": "I like how well it matches my site."}, {"start": 193.0, "text": "One last detail I want to change is the arrow."}, {"start": 197.0, "text": "With customizable select,"}, {"start": 198.0, "text": "I can use a new selector called ::picker-icon to change it."}, {"start": 202.0, "text": "I'll use the ::picker-icon selector to set the content property to a new glyph"}, {"start": 206.0, "text": "and to size it correctly with a width."}, {"start": 209.0, "text": "Using the:open pseudo-class,"}, {"start": 210.0, "text": "I can also set different colors on the button"}, {"start": 213.0, "text": "when the drop-down menu is open."}, {"start": 215.0, "text": "I've also updated the arrow to match the text color for the open state."}, {"start": 220.0, "text": "Here is my select, matching the rest of my site."}, {"start": 223.0, "text": "And that took me only a few lines of CSS to write."}, {"start": 226.0, "text": "Now, I want to style the drop-down itself, and customizable select lets me do this!"}, {"start": 231.0, "text": "I'll show you how."}, {"start": 233.0, "text": "Like ::picker-icon, the drop-down menu also comes with styleable parts:"}, {"start": 238.0, "text": "the menu itself can be styled with ::picker(select) on the select element"}, {"start": 242.0, "text": "and the check with ::checkmark on the option element."}, {"start": 245.0, "text": "Now let's add some CSS."}, {"start": 248.0, "text": "To start with a clean slate,"}, {"start": 249.0, "text": "I need to first opt-out of the native menu."}, {"start": 252.0, "text": "I can do that by using the new ::picker(select) selector,"}, {"start": 256.0, "text": "and by setting appearance: base-select."}, {"start": 258.0, "text": "Now, I'm ready to go."}, {"start": 260.0, "text": "First, I'm going to arrange my spacing with some padding and margin."}, {"start": 264.0, "text": "Let's handle the borders and the box-shadow on my drop-down."}, {"start": 268.0, "text": "Perfect!"}, {"start": 270.0, "text": "Now I want to put some emphasis on the selected option"}, {"start": 273.0, "text": "so it's clear to my customer what they've picked."}, {"start": 276.0, "text": "I can set a bold font on the checked option"}, {"start": 278.0, "text": "and gray out the other ones."}, {"start": 281.0, "text": "As a final step, I'll change the default checkmark"}, {"start": 284.0, "text": "by setting the content CSS property"}, {"start": 286.0, "text": "and the width on the ::checkmark selector,"}, {"start": 289.0, "text": "similarly to what I did with ::picker-icon."}, {"start": 292.0, "text": "It's amazing how far I was able to go styling my Sort by menu"}, {"start": 296.0, "text": "with so little code."}, {"start": 298.0, "text": "How much further can I go?"}, {"start": 301.0, "text": "With customizable select,"}, {"start": 303.0, "text": "I can now go beyond the simple list of options displayed as text."}, {"start": 307.0, "text": "I'll go through an example with my next feature."}, {"start": 310.0, "text": "My client is best known for photography in a handful of categories"}, {"start": 314.0, "text": "and I want to spotlight those photos."}, {"start": 316.0, "text": "So, I'll add a way to browse photographs by their most popular categories."}, {"start": 321.0, "text": "I decide to create another select element using the previous styling."}, {"start": 325.0, "text": "However, I want the select to have symbols to make it more visually interesting."}, {"start": 330.0, "text": "With customizable select, I can put any kind of content:"}, {"start": 334.0, "text": "images, videos, emojis, whatever I like."}, {"start": 338.0, "text": "In this case, I've chosen to use an SVG and a label inside each option element"}, {"start": 343.0, "text": "so the customer can explore the categories more easily."}, {"start": 346.0, "text": "I left the image alt text empty"}, {"start": 349.0, "text": "because I don't want the \"Flowers\" label to be called out twice on screen readers."}, {"start": 353.0, "text": "Since I removed the checkmark,"}, {"start": 355.0, "text": "I want to highlight the selected option more prominently."}, {"start": 359.0, "text": "I'll use the checked selector to change the colors."}, {"start": 363.0, "text": "This works, but my layout doesn't really fit my window."}, {"start": 366.0, "text": "The symbols make the drop-down very long."}, {"start": 369.0, "text": "I need to try something else."}, {"start": 371.0, "text": "With customizable select,"}, {"start": 372.0, "text": "it's simpler than ever to bring different layouts to the select drop-down,"}, {"start": 377.0, "text": "while reusing the power of other CSS features in my drop-down."}, {"start": 380.0, "text": "Here, I've gone with a grid layout."}, {"start": 383.0, "text": "Grid-template defines the number of rows and columns,"}, {"start": 386.0, "text": "while gap defines the spacing between the grid cells."}, {"start": 389.0, "text": "That puts my drop-down in a nice grid."}, {"start": 392.0, "text": "I think this looks much more organized."}, {"start": 395.0, "text": "I've finished my drop-down,"}, {"start": 397.0, "text": "but I realize I now want to have the SVG of the selected option"}, {"start": 401.0, "text": "inside the button itself."}, {"start": 402.0, "text": "My symbols were already in the HTML markup,"}, {"start": 405.0, "text": "so why aren't they in the button?"}, {"start": 408.0, "text": "I need to do one more thing for this to happen."}, {"start": 411.0, "text": "Select comes with a button."}, {"start": 413.0, "text": "That's what people click to open the drop-down."}, {"start": 416.0, "text": "But that button only displays text."}, {"start": 418.0, "text": "My image is rich content."}, {"start": 421.0, "text": "I'm going to use another tool that I get from customizable select"}, {"start": 424.0, "text": "to solve that problem:"}, {"start": 426.0, "text": "the element."}, {"start": 428.0, "text": "Customizable select now lets me replace the built-in button"}, {"start": 431.0, "text": "by placing a button element"}, {"start": 433.0, "text": "as the first child of the select element."}, {"start": 436.0, "text": "Since my button is currently empty, I only see the arrow."}, {"start": 440.0, "text": "Putting a button in a select element was previously not allowed in HTML,"}, {"start": 445.0, "text": "now it lets me put custom content inside the button,"}, {"start": 448.0, "text": "like labels or like the new element."}, {"start": 452.0, "text": "What's special about is that it shows the rich content"}, {"start": 455.0, "text": "that's part of my selected option,"}, {"start": 457.0, "text": "like my SVG that's next to the \"Everything\" label."}, {"start": 461.0, "text": "I think Tim is really going to like how this menu looks and works,"}, {"start": 465.0, "text": "but I'm not quite done yet."}, {"start": 468.0, "text": "I need to check how this looks in browsers that don't support customizable select."}, {"start": 473.0, "text": "Here's where progressive enhancement kicks in -"}, {"start": 476.0, "text": "it's still usable in browsers that don't support the feature."}, {"start": 480.0, "text": "Customers get the native pop-up."}, {"start": 482.0, "text": "This is one of the things that are great about re-using the select element."}, {"start": 486.0, "text": "And because it is a semantic element,"}, {"start": 488.0, "text": "I still get those built-in accessibility features."}, {"start": 493.0, "text": "This was exciting!"}, {"start": 494.0, "text": "My select elements blend in nicely with the look and feel of the site."}, {"start": 498.0, "text": "I even added a fun radial color picker,"}, {"start": 500.0, "text": "also built entirely with customizable select."}, {"start": 504.0, "text": "Now, my client has a beautiful, sortable home for their photographs."}, {"start": 508.0, "text": "I also got to take advantage of Safari's support"}, {"start": 510.0, "text": "for Grid Lanes to lay out my images."}, {"start": 514.0, "text": "To learn more, check out \"Learn CSS Grid Lanes\""}, {"start": 517.0, "text": "where Brandon shows you how this new layout method works."}, {"start": 520.0, "text": "These features are coming to Safari 27."}, {"start": 523.0, "text": "If you want to try them now,"}, {"start": 525.0, "text": "you can download Safari Technology Preview or Safari Beta."}, {"start": 529.0, "text": "Be sure to check out the demo on webkit.org,"}, {"start": 532.0, "text": "and try styling something simple"}, {"start": 533.0, "text": "with customizable select on your own website."}, {"start": 537.0, "text": "Make sure to test your select with browsers"}, {"start": 539.0, "text": "that don't support the technology and with assistive tools."}, {"start": 542.0, "text": "Webkit.org has a blog post to learn more about best practices"}, {"start": 546.0, "text": "to help make your interface work for everyone."}, {"start": 549.0, "text": "Finally, get creative and try experimenting with different ways to implement it."}, {"start": 554.0, "text": "Most importantly, I hope you have fun!"}, {"start": 557.0, "text": "I can't wait to see how you use this feature on your website."}, {"start": 560.0, "text": "Thanks for watching!"}]}