需求原因：我在vue开发中，也会习惯使用各种UI库，但让人难受的是，提供的UI组件的样式难以覆盖，比如我要用的select，我的界面风格是深蓝色的，它的白色背景都不符合需求，要跑到element-plus的样式文件去修改。
=》之后，我想，这种简单的组件，我完全可以自己手写，好处可以让我更好的掌握select本身，消除不确定的部分。
=》以后，可以直接拿来当组件使用
下面就是自己修改出来的样式截图
vue3 里面的html结构
<div class="selectParent"><select class="selectBox"><optionv-for="item in blockArr":key="item.value":value="item.value"class="optionCommon">{{ item.label }}</option></select></div>
vue3 script setup里面
<script setup>import { reactive, ref } from "vue";let data1 = [{label: "滕滕勇猛无敌1",value: 1,},{label: "滕滕勇猛无敌2",value: 2,},{label: "滕滕勇猛无敌3",value: 3,},{label: "滕滕勇猛无敌4",value: 4,},{label: "滕滕勇猛无敌5",value: 5,},];let blockArr = reactive(data1);</script>
vue3 style
<style scoped>.selectParent {display: flex;flex-direction: row;justify-content: center;padding-top: 1.1rem;}.selectBox {background-color: rgba(255, 255, 255, 0);color: #fff;border: none;font-size: 2.6rem;}.optionCommon {background-color: rgba(5, 36, 72, 1);}/* select 选中时，不显示边框 */select {outline: none;}</style>
outline属性
在点击select时，会出现边框，这个边框叫外围边框，不占内容大小。案例如下
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">p {border:red solid thin;outline:#00ff00 dotted thick;}</style></head><body><p><b>注释：</b>只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline 属性。</p></body></html>
