Customizing the design of a tag is notoriously difficult. Sometimes it's impossible without building your own from scratch using a combination of styled with custom JavaScript. In this article, you will learn how to build a Vue.js component that can be styled using completely custom CSS. select divs Demo: https://codesandbox.io/s/custom-vuejs-select-component-8nqgd The HTML {{ selected }} {{ option }} < > template < = = @ = > div class "custom-select" :tabindex "tabindex" blur "open = false" < = = @ = > div class "selected" :class "{open: open}" click "open = !open" </ > div < = = > div class "items" :class "{selectHide: !open}" < = = = @ = > div class "item" v-for "(option, i) of options" :key "i" click "selected=option; open=false; $emit('input', option)" </ > div </ > div </ > div </ > template The following is important to note: The 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. tabindex By emitting the selected option using the 'input' parameter, the parent component can react to changes easily. The JavaScript <script> { :{ :{ : , : }, :{ : , : , : }
  },
  data() { { : .options.length > ? .options[ ] : , : };
  },
  mounted(){ .$emit( , .selected);
  }
}; export default props options type Array required true tabindex type Number required false default 0 return selected this 0 this 0 null open false this 'input' this </ > script Also, important things to note: We also emit the selected value on 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 . mount tabindex The CSS < > { : relative; : ; : left; : none; : ; : ;
} { : ; : ; : solid ; : ; : ; : pointer; : none;
} { : solid ; : ;
} { : absolute; : ; : ; : ; : ; : ; : solid transparent; : transparent transparent transparent;
} { : ; : ; : hidden; : solid ; : solid ; : solid ; : absolute; : ; : ; : ;
} { : ; : ; : pointer; : none;
} { : ;
} { : none;
}
</ > style scoped .custom-select position width 100% text-align outline height 47px line-height 47px .selected background-color #080D0E border-radius 6px border 1px #858586 color #ffffff padding-left 8px cursor user-select .selected .open border 1px #CE9B2C border-radius 6px 6px 0px 0px .selected :after position content "" top 22px right 10px width 0 height 0 border 4px border-color #fff .items color #ffffff border-radius 0px 0px 6px 6px overflow border-right 1px #CE9B2C border-left 1px #CE9B2C border-bottom 1px #CE9B2C position background-color #080D0E left 0 right 0 .item color #ffffff padding-left 8px cursor user-select .item :hover background-color #B68A28 .selectHide display style This CSS is just an example, its what we use for the app. Feel free to completely change the styling to whatever your needs are. Qvault 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: https://qvault.io Star our Github: https://github.com/q-vault/qvault Read the original

2022 - HackerNoon Contributor of the Year - Algorithms

2022 - HackerNoon Contributor of the Year - Cryptography

2022 - HackerNoon Contributor of the Year - Github

2022 - HackerNoon Contributor of the Year - Job Hunting

2022 - HackerNoon Contributor of the Year - Mathematics

2022 - HackerNoon Contributor of the Year - Online Education

Coding Guru of 2022

Super Career Strategist of 2022

Learn to code on Boot.dev

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Mathematics

Nominated for 2022 - HackerNoon Contributor of the Year - Cryptography

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Nominated for 2022 - HackerNoon Contributor of the Year - Online Education

Nominated for 2022 - HackerNoon Contributor of the Year - Job Hunting

Nominated for Super Career Strategist of 2022

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

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

Too Long; Didn't Read

People Mentioned

Company Mentioned

Lane Wagner

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

People Mentioned

Company Mentioned

Lane Wagner

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES