Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Make a <select> Field that Takes Advantage of Native Browser Behaviour

    Rory SmithRory Smith

    Mobile browsers have excellent user experience when it comes to select fields. Let’s find out how they look compared to desktop browsers.

    htmlHTML 5
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 Let's write a select field that's going to contain all of the continents. We'll have Africa, Antarctica, and so on. Let's save this and see what it looks like in a desktop browser. I've got desktop Chrome open here. Here's our little select field. Let's write some styles to make this a bit bigger.

    00:32 Targeting our select field, we'll give it width 100 percent so that it takes up the available width. Font size 30 pixels. Padding five pixels. Border radius five pixels. Let's save and refresh in our desktop browser. Here's our select field.

    00:56 In desktop browsers like this one, when we interact with the select field, we get this drop down menu appear. However, the select field looks different depending on what device and browser you're looking on.

    01:10 Let's head over to our iOS simulator. Here's the select field in our iPhone SE simulator running Safari. Already, we can see differences in the styling. The main difference can be seen when we interact with the select field. Instead of a drop down, this section appears at the bottom of the page. It contains all of the options. This is more suitable for a small screen because there's more screen space available to select an option.

    01:43 Now, let's head over to our Android simulator. Here's our select field in the Nexus 5 simulator running Chrome. This time when we interact with it we get a modal appear. There's even more screen space available to us to select an option.

    02:02 There's nothing fancy going on here. We're just using the native browser capabilities such as this select menu, and we're finding out that the native behavior is actually optimized for the device and the browser that we're using.

    Discuss

    Discuss