Auto move option to top of select box năm 2024

A dropdown menu presents a list of options for users to choose from. This widget is commonly used in forms to collect user input. In some cases, it can also be used as a filtering mechanism.

We typically add dropdowns to a webpage using the native HTML

...

9 element. However, due to the complexity of its internal structure, achieving consistent styling for the native element across different browsers is quite challenging.

To deploy a fully customized and accessible select component, we have two main options: using a component library or building it from scratch.

In this lesson, we will explore how to achieve a consistent appearance while still utilizing the native

...

9 element using CSS. By doing so, we can preserve all the accessibility advantages that come built-in with the native element.

Later on in this article, we will also delve into creating a custom select widget from scratch in the most effective manner using JavaScript.

Jump ahead:

We’ll create two select widgets in this tutorial. You can check out the finished demos on CodePen — one created using CSS only, and the other created with CSS and JavaScript.

Understanding how the

...

9 element works

To understand why styling the

...

9 dropdown is challenging, let’s examine its internal mechanisms.

Using the following HTML markup, we can create a dropdown list with seven selectable options:

Open this select menu
GitHub
Instagram
Facebook
LinkedIn
Twitter
Reddit

We’ll get a widget that looks like one of the following, with slight differences depending on the user’s browser:

If we take a moment and inspect the widget using the browser’s developer tools, we’ll notice that it is implemented as a web component .

If you’re on Chrome, you can enable the Show user agent shadow DOM option in your browser’s settings to see the shadow DOM:

In the custom range slider article, we discussed how web browsers internally encapsulate and hide elements and styles that constitute the UI control using a shadow DOM.

One benefit of using the shadow DOM is that it prevents conflicts between the styles of a component and those of other elements in the actual DOM. This results in a more predictable and reliable user interface.

However, this isolation comes with certain limitations in terms of what we can style. Additionally, because of different implementations across browsers, inconsistencies may arise.

Customizing the

...

9 dropdown with CSS only

Let’s revisit the dropdown markup we mentioned earlier:

...

We can add the following CSS to provide some initial styles:

.custom-select { min-width: 350px; } select { appearance: none; / safari / -webkit-appearance: none; / other styles for aesthetics / width: 100%; font-size: 1.15rem; padding: 0.675em 6em 0.675em 1em; background-color:

fff;

border: 1px solid

caced1;

border-radius: 0.25rem; color:

000;

cursor: pointer; }

One important piece of code here is the

.custom-select { / ... / position: relative; }

3 declaration. It instructs the browser to remove the default appearance styles of the native dropdown. This is a crucial step we need to take before we apply our custom styles.

Looking at the result below, you can see that setting the

.custom-select { / ... / position: relative; }

4 property to

.custom-select { / ... / position: relative; }

5 also removes the native dropdown arrow:

Let’s create a custom arrow for our

...

9 dropdown.

Adding a custom arrow to the native

...

9 dropdown

By utilizing CSS pseudo-elements, we can create a custom arrow without the need to add an additional HTML element. To achieve this, we’ll apply a

.custom-select { / ... / position: relative; }

8 property to the container element:

.custom-select { / ... / position: relative; }

Then, we’ll position our CSS pseudo-elements — such as

.custom-select { / ... / position: relative; }

9 and

.custom-select::before, .custom-select::after { --size: 0.3rem; position: absolute; content: ""; right: 1rem; pointer-events: none; } .custom-select::before { border-left: var[--size] solid transparent; border-right: var[--size] solid transparent; border-bottom: var[--size] solid black; top: 40%; } .custom-select::after { border-left: var[--size] solid transparent; border-right: var[--size] solid transparent; border-top: var[--size] solid black; top: 55%; }

0 — absolutely inside the container:

In the code, we have employed the “border trick” to create both the up and down arrow indicators. By utilizing CSS borders in this way, we have designed arrow shapes that suit the desired appearance.

Additionally, we have disallowed pointer events on the arrow element to enforce proper functionality. This way, when users click on the arrow, the select element receives the click event, not the arrow itself.

Below is the behavior without the CSS

1 declaration:

Disallowing pointer events on the arrow element ensures that the dropdown opens as expected when interacting with the arrow indicator, providing a seamless and user-friendly experience.

See the result on CodePen:

See the Pen Custom Select Dropdown with CSS Only by Ibadehin Mojeed [@ibaslogic] on CodePen.

Considerations to keep in mind regarding a CSS-only implementation

There are a few notes you should consider when customizing the

...

9 dropdown using this method.

For consistent design across browsers, we adopt a strategic approach by styling the native

...

9 dropdown to closely resemble the browser’s default appearance. This ensures the dropdown maintains a familiar and uniform look, giving users a consistent experience across web browsers.

Additionally, with the native

...

9 element, we have control over the initial appearance of the dropdown — that is, how the select dropdown looks before it is opened. However, once the

...

9 element is opened, the list of options will take the browser’s default styling.

If you want the dropdown to appear black initially, with white arrows and text, you can modify the CSS to the following:

select { / ... / background-color:

000;

color:

fff;

} .custom-select::before { / ... / border-bottom: var[--size] solid

fff;

} .custom-select::after { / ... / border-top: var[--size] solid

fff;

}

Again, custom styles are limited to the initial appearance of the dropdown. We cannot customize the opened list of options, add additional elements like images, or achieve a consistent background color for each option.

In the next section, we’ll explore how to create a fully custom

...

9 dropdown from the ground up.

Custom

...

9 dropdown from scratch with CSS and JavaScript

The native

...

9 element automatically generates components like the select button and list box. However, in this custom implementation, we’ll manually assemble the necessary elements. Additionally, rather than using generic elements, we’ll employ semantic and meaningful elements.

Take a look at the markup below:

Open this select menu


  
  GitHub


  
  Instagram

We have used a

9 element containing a

select { / ... / background-color:

000;

color:

fff;

} .custom-select::before { / ... / border-bottom: var[--size] solid

fff;

} .custom-select::after { / ... / border-top: var[--size] solid

fff;

}

0 that will display the selected value and another

select { / ... / background-color:

000;

color:

fff;

} .custom-select::before { / ... / border-bottom: var[--size] solid

fff;

} .custom-select::after { / ... / border-top: var[--size] solid

fff;

}

0 to style a custom arrow. We then use a group of radio buttons to represent the list of options.

This native element provides the functionality for keyboard interactivity. Remember, we must keep accessibility in mind!

The result:

Using radio buttons in the

select { / ... / background-color:

000;

color:

fff;

} .custom-select::before { / ... / border-bottom: var[--size] solid

fff;

} .custom-select::after { / ... / border-top: var[--size] solid

fff;

}

2 dropdown allows for smooth keyboard navigation using the

select { / ... / background-color:

000;

color:

fff;

} .custom-select::before { / ... / border-bottom: var[--size] solid

fff;

} .custom-select::after { / ... / border-top: var[--size] solid

fff;

}

3 and

select { / ... / background-color:

000;

color:

fff;

} .custom-select::before { / ... / border-bottom: var[--size] solid

fff;

} .custom-select::after { / ... / border-top: var[--size] solid

fff;

}

4 keys after a user tab from the select button into the list box. We’ll to prevent the dropdown from becoming too visually cluttered.

Adding accessibility features

In the next step, we’ll add appropriate ARIA attributes so that the

...

9 dropdown can be more accessible for people with disabilities.

Below are the necessary attributes for our widget:

...
...

Some of these attributes may look familiar if you read our previous tutorial on making dropdown menus with CSS. Let’s define each of them briefly, starting with the attributes on the

9 element:

select { / ... /
background-color:
000;
color:
fff;
} .custom-select::before { / ... /
border-bottom: var[--size] solid
fff;
} .custom-select::after { / ... /
border-top: var[--size] solid
fff;
} 7 identifies the button as the element that controls the list box
select { / ... /
background-color:
000;
color:
fff;
} .custom-select::before { / ... /
border-bottom: var[--size] solid
fff;
} .custom-select::after { / ... /
border-top: var[--size] solid
fff;
} 8 describes the button’s purpose
select { / ... /
background-color:
000;
color:
fff;
} .custom-select::before { / ... /
border-bottom: var[--size] solid

fff;
} .custom-select::after { / ... /
border-top: var[--size] solid
fff;
} 9 informs the user’s screen reader that there is an interactive popup element and describes its type

Open this select menu

  
    
  GitHub  
  
  
    
  Instagram  
  
 ... >

0 links the controlling element to the expanded widget. In this case, we assigned the ID of the expanded widget to the

Open this select menu

  
    
  GitHub  
  
  
    
  Instagram  
  
 ... >

0 attribute on the controlling element

Open this select menu

  
    
  GitHub  
  
  
    
  Instagram  
  
 ... >

2 toggles between

Open this select menu

  
    
  GitHub  
  
  
    
  Instagram  
  
 ... >

3 and

Open this select menu

  
    
  GitHub  
  
  
    
  Instagram  
  
 ... >

4 values to indicate the state of the dropdown — in other words, whether the

...

9 dropdown is currently hidden or visible. Later, we’ll to reflect the current state of the dropdown

Next, on the

Open this select menu


  
  GitHub


  
  Instagram

6 element:

Open this select menu

  
    
  GitHub  
  
  
    
  Instagram  
  
 ... >

7 identifies the

Open this select menu

  
    
  GitHub  
  
  
    
  Instagram  
  
 ... >

6 as a list from which a user may select an item

Open this select menu

  
    
  GitHub  
  
  
    
  Instagram  
  
 ... >

9 represents an individual selectable option for each child in the list

Now, let’s move on to styling our

...

9 dropdown.

Styling the

...

9 dropdown

We’ll start with styling the initial appearance — in other words, the select button and its content — with the following CSS:

.custom-select { position: relative; width: 400px; max-width: 100%; font-size: 1.15rem; color:

000;

margin-top: 3rem; } .select-button { width: 100%; font-size: 1.15rem; background-color:

fff;

padding: 0.675em 1em; border: 1px solid

caced1;

border-radius: 0.25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .selected-value { text-align: left; } .arrow { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid

000;

transition: transform ease-in-out 0.3s; }

In the code above, we implemented various CSS styles to enhance the overall aesthetics of our

...

9 dropdown.

One important detail here is the

...
...

...
...

4 that we applied to the containing element. This will let us place the dropdown absolutely below the button. When the user opens the dropdown, it will overlap other content on the page.

Notice we added a CSS

...
...

5 property on the arrow for a smooth transition effect. We’ll see the effect when we implement interactivity. For now, the appearance should resemble the following:

Next, the following CSS will style the list box:

.select-dropdown { position: absolute; list-style: none; width: 100%; box-shadow: 0 10px 25px rgba[0, 0, 0, 0.2]; background-color:

fff;

border: 1px solid

caced1;

border-radius: 4px; padding: 10px; margin-top: 10px; max-height: 200px; overflow-y: auto; transition: 0.5s ease; } .select-dropdown:focus-within { box-shadow: 0 10px 25px rgba[94, 108, 233, 0.6]; } .select-dropdown li { position: relative; cursor: pointer; display: flex; gap: 1rem; align-items: center; } .select-dropdown li label { width: 100%; padding: 8px 10px; cursor: pointer; } .select-dropdown::-webkit-scrollbar { width: 7px; } .select-dropdown::-webkit-scrollbar-track { background:

f1f1f1;

border-radius: 25px; } .select-dropdown::-webkit-scrollbar-thumb { background:

ccc;

border-radius: 25px; }

We’ve used a couple of different CSS properties, but let’s talk about the

...
...

6 pseudo-class that we applied to the select dropdown.

This pseudo-class will apply its rules — in this case, a

...
...

7 effect — when any of its child elements receive focus. As we can see in the GIF below, it improves the user experience by visually highlighting the part of the dropdown widget receiving focus:

The GIF above demonstrates how the user can navigate the dropdown using their keyboard.

Adding

fff;

border: 1px solid

caced1;

border-radius: 0.25rem; color:

000;

cursor: pointer; }

fff;

border: 1px solid

caced1;

border-radius: 0.25rem; color:

000;

cursor: pointer; }

7, and

fff;

border: 1px solid

caced1;

border-radius: 0.25rem; color:

000;

cursor: pointer; }

8 states

For the sake of accessibility and a smooth UX, we’ll add styles for

fff;

border: 1px solid

caced1;

border-radius: 0.25rem; color:

000;

cursor: pointer; }

fff;

border: 1px solid

caced1;

border-radius: 0.25rem; color:

000;

cursor: pointer; }

6, and

.custom-select { position: relative; width: 400px; max-width: 100%; font-size: 1.15rem; color:

000;

margin-top: 3rem; } .select-button { width: 100%; font-size: 1.15rem; background-color:

fff;

padding: 0.675em 1em; border: 1px solid

caced1;

000;

transition: transform ease-in-out 0.3s; }

3 states to provide a visual effect while interacting with the

...

9 dropdown:

...

The GIF below demonstrates how the select widget behaves with the custom styling we just added:

Hiding the radio buttons

Now that we can visualize how the radio input works, we can now hide it with the following CSS rules:

...

Implementing JavaScript code

We’ll use JavaScript to toggle the dropdown and select an option from the list box. Let’s begin by making modifications to the CSS:

...

We’ve hidden the dropdown by default and applied style rules to transform the arrow indicator and display the dropdown when an

.custom-select { position: relative; width: 400px; max-width: 100%; font-size: 1.15rem; color:

000;

margin-top: 3rem; } .select-button { width: 100%; font-size: 1.15rem; background-color:

fff;

padding: 0.675em 1em; border: 1px solid

caced1;

000;

transition: transform ease-in-out 0.3s; }

5 class is applied to the container element. We’ll add the

.custom-select { position: relative; width: 400px; max-width: 100%; font-size: 1.15rem; color:

000;

margin-top: 3rem; } .select-button { width: 100%; font-size: 1.15rem; background-color:

fff;

padding: 0.675em 1em; border: 1px solid

caced1;

000;

transition: transform ease-in-out 0.3s; }

5 class using JavaScript:

...

The JavaScript code above begins by getting a reference to the select button and the container element. Then, it listens for a click event on the button and dynamically toggles the

.custom-select { position: relative; width: 400px; max-width: 100%; font-size: 1.15rem; color:

000;

margin-top: 3rem; } .select-button { width: 100%; font-size: 1.15rem; background-color:

fff;

padding: 0.675em 1em; border: 1px solid

caced1;

000;

transition: transform ease-in-out 0.3s; }

5 class on the container element.

It also dynamically updates the

Open this select menu


  
  GitHub


  
  Instagram

2 attribute on the actual button based on the current state.

The result:

Displaying the selected option

Once the user selects an option from the list, we want to automatically close the dropdown and display the selected option. To do so, we’ll start by targeting all the options in the list along with the element that should display the value of the currently selected option:

...

Then, we will loop through each of the options and listen for the user’s selected value. The following code listens for both click and keyboard events:

...

Adding secondary information to the

...

9 options

Let’s add icons alongside the options using Boxicons. Start by adding the Boxicons CDN to the

.select-dropdown { position: absolute; list-style: none; width: 100%; box-shadow: 0 10px 25px rgba[0, 0, 0, 0.2]; background-color:

fff;

border: 1px solid

caced1;

f1f1f1;

border-radius: 25px; } .select-dropdown::-webkit-scrollbar-thumb { background:

ccc;

border-radius: 25px; }

0 element:

...

Then, add the necessary icons alongside the label text:

...

After that, apply the following CSS for better spacing and alignment:

...

See the final result on CodePen below:

See the Pen Custom Select Dropdown with CSS and JavaScript by Ibadehin Mojeed [@ibaslogic] on CodePen.

Conclusion

The

...

9 dropdown, like other native HTML elements, can be challenging to style. In this lesson, we learned two approaches.

The first approach used CSS to customize the native

...

9 element. We achieved a custom style by carefully styling the initial appearance allowing for a more consistent and visually appealing component.

In the second approach, we built a custom dropdown from scratch with CSS and JavaScript. We created a fully custom select dropdown using semantic elements for accessibility and keyboard interactivity.

If you found this lesson helpful, please share it with others. Your feedback and contributions are welcome in the comment section.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

How to set default option in dropdown html?

The default value of the select element can be set by using the 'selected' attribute on the required option. This is a boolean attribute. The option that is having the 'selected' attribute will be displayed by default on the dropdown list.nullHow to set the default value for an HTML elementwww.geeksforgeeks.org › how-to-set-the-default-value-for-an-html-select-...null

How to activate a TextBox if I select an other option in drop down box?

When an item [option] is selected in DropDownList [HTML SELECT], the EnableDisableTextBox JavaScript function is executed. Inside this function, based on whether the Other option [item] is selected, the TextBox will be enabled else disabled. The HTML Markup consists of a DropDownList [HTML SELECT] and a TextBox.nullActivate TextBox if another option is selected in DropDownBox using ...www.aspsnippets.com › Articles › Activate-TextBox-if-another-option-is-se...null

How to open dropdown button click?

Example Explained. Use any element to open the dropdown menu, e.g. a , or

element. Use a container element [like

] to create the dropdown menu and add the dropdown links inside it. Wrap a

element around the button and the

to position the dropdown menu correctly with CSS.nullHow To Create a Dropdown Menu With CSS and JavaScriptwww.w3schools.com › howto › howto_js_dropdownnull

How do I add options to select using Dom?

The Select add[] method is used for adding an option in a drop-down list. The Select add[] method accepts the index number as a parameter for adding the new option in the desired position.nullHTML | DOM Select add Method - GeeksforGeekswww.geeksforgeeks.org › html-dom-select-add-methodnull