select tag custom style

Reason for demand: I am also used to using various UI libraries in vue development, but the uncomfortable thing is that the styles of the UI components provided are difficult to cover. For example, the select I want to use, my interface style is dark blueColor, its white background does not meet the requirements, you have to go to the element-plus style file to modify it.

=", I thought, this kind of simple component, I can write by myself, the advantage can let me better grasp the selection itself and eliminate the uncertain parts.

="Afterwards, it can be used directly as a component

The following is a screenshot of my modified style

html structure in vue3

{{ item.label }}

Inside vue3 script setup

vue3 style

outline attribute

When you click select, a border will appear. This border is called the peripheral border and does not account for the content size.The case is as follows

Note: Internet Explorer 8 (and later) supports the outline property only when !DOCTYPE is specified.