Before you go, check out these stories!

Hackernoon logoMaking a Custom Select Component in Vue.js [A How-To Guide] by@wagslane

Making a Custom Select Component in Vue.js [A How-To Guide]

Author profile picture

@wagslaneLane Wagner

Bitcoinist, libertarian, atheist, cryptography fan, and founder of

Customizing the design of a select tag is notoriously difficult. Sometimes it's impossible without building your own from scratch using a combination of styled divs with custom JavaScript. In this article, you will learn how to build a Vue.js component that can be styled using completely custom CSS.



    @blur="open = false"
      :class="{open: open}"
      @click="open = !open"
      {{ selected }}
      :class="{selectHide: !open}"
        v-for="(option, i) of options"
        @click="selected=option; open=false; $emit('input', option)"
        {{ option }}

The following is important to note:

  • The tabindex property allows our component to be focused, which in turn allows it to be blurred. The blur event closes our component when a user clicks outside of the component.
  • By emitting the selected option using the 'input' parameter, the parent component can react to changes easily.

The JavaScript

export default {
      type: Array,
      required: true
      type: Number,
      required: false,
      default: 0
  data() {
    return {
      selected: this.options.length > 0 ? this.options[0] : null,
      open: false
    this.$emit('input', this.selected);

Also, important things to note:

We also emit the selected value on mount so that the parent doesn't need to set the default value explicitly.If our select component is a small part of a larger form, then we want to be able to set the correct tabindex.


<style scoped>

.custom-select {
  position: relative;
  width: 100%;
  text-align: left;
  outline: none;
  height: 47px;
  line-height: 47px;

.selected {
  background-color: #080D0E;
  border-radius: 6px;
  border: 1px solid #858586;
  color: #ffffff;
  padding-left: 8px;
  cursor: pointer;
  user-select: none;
  border: 1px solid #CE9B2C;
  border-radius: 6px 6px 0px 0px;

.selected:after {
  position: absolute;
  content: "";
  top: 22px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-color: #fff transparent transparent transparent;

.items {
  color: #ffffff;
  border-radius: 0px 0px 6px 6px;
  overflow: hidden;
  border-right: 1px solid #CE9B2C;
  border-left: 1px solid #CE9B2C;
  border-bottom: 1px solid #CE9B2C;
  position: absolute;
  background-color: #080D0E;
  left: 0;
  right: 0;

  color: #ffffff;
  padding-left: 8px;
  cursor: pointer;
  user-select: none;

  background-color: #B68A28;

.selectHide {
  display: none;

This CSS is just an example, its what we use for the Qvault app. Feel free to completely change the styling to whatever your needs are.

I hope this helps you create your own custom select components, the following is a link to a gist of the full component:

Again, check out the demo for a live example:

By Lane Wagnerย @wagslane

Download Qvault:ย

Star our Github:ย


Join Hacker Noon

Create your free account to unlock your custom reading experience.