当前位置：网站首页>select 标签自定义样式

select 标签自定义样式

2022-08-05 02:14:00 【tengyuxin】

需求原因：我在vue开发中，也会习惯使用各种UI库，但让人难受的是，提供的UI组件的样式难以覆盖，比如我要用的select，我的界面风格是深蓝色的，它的白色背景都不符合需求，要跑到element-plus的样式文件去修改。

=》之后，我想，这种简单的组件，我完全可以自己手写，好处可以让我更好的掌握select本身，消除不确定的部分。

=》以后，可以直接拿来当组件使用

下面就是自己修改出来的样式截图

vue3 里面的html结构

<div class="selectParent">
          <select class="selectBox">
            <option
              v-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>

原网站

版权声明
本文为[tengyuxin]所创，转载请带上原文链接，感谢
https://blog.csdn.net/tengyuxin/article/details/126153603