css当中appearance: none；border: none；outline: none；的区别

代码如下：

<template>
  <div>
    <select class="testSelect0"><br/>
      <option>18岁以下option>
      <option>18-28岁option>
      <option>28-38岁option>
      <option>38岁以上option>
    select><br/>
    <select class="testSelect1"><br/>
      <option>18岁以下option>
      <option>18-28岁option>
      <option>28-38岁option>
      <option>38岁以上option>
    select><br/>
    <select class="testSelect2">
      <option>18岁以下option>
      <option>18-28岁option>
      <option>28-38岁option>
      <option>38岁以上option>
    select><br/>
    <select class="testSelect3">
      <option>18岁以下option>
      <option>18-28岁option>
      <option>28-38岁option>
      <option>38岁以上option>
    select><br/>
  div>
template>

<script setup>

script>

<style scoped lang="less">
.testSelect0{
  margin-top: 20px;
  margin-left: 30px;
  width: 100px;
}
.testSelect1{
  margin-top: 20px;
  margin-left: 30px;
  width: 100px;
  appearance: none;
}

.testSelect2{
  width: 100px;
  margin-top: 20px;
  margin-left: 30px;
  //outline: none;
  border: none;
}

.testSelect3{
  width: 100px;
  margin-top: 20px;
  margin-left: 30px;
  outline: none;
  //border: none;
}
style>

2、效果如下：

2.1、默认状态即谁都没点击的情况下显示结果如下：可以看出1,4的结果显示一样，2少了下拉的箭头，3无外边框。单机第一个出现下来，再次点击收起后外边框变粗

默认状态

点击下拉框

再次点击收起下拉框

2.2、第二个无下拉箭头，点击后可以看出外边框变粗，再次点击下拉框后收起下拉框但是外边框依然变粗

点击下拉框

再次点击收起下拉框

2.3、第三个无外边框，单点下拉，再次点击后外边框出来并变粗。

点击下拉框

再次点击收起下拉框

2.4、第四个有外边框，单点下拉，再次点击后外边框也不变粗

点击下拉框

再次点击收起下拉框