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

Stop With the Obfuscation: Encoding and Encryption are Not the Same

How To Build JWT's in Go

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

Make resilience your competitive advantage

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

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Complete Overview of Cryptography

How To Get Key Clicked Element in React

How to use componentWillMount with Functional Components in React

ASP.NET8 View Components Set New Bar for Web UI Reusability

8 Steps to Find the Best Reporting Component for Your Application

A Complete Overview of Cryptography

How To Get Key Clicked Element in React

How to use componentWillMount with Functional Components in React

ASP.NET8 View Components Set New Bar for Web UI Reusability

8 Steps to Find the Best Reporting Component for Your Application

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps