需求原因：我在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>

select 标签自定义样式相关推荐

H5 audio 音频标签自定义样式修改以及添加播放控制事件
20181023 更新原来的代码拖动进度点只写了mouse事件,手机端的话应该是touch事件.所以出现了有朋友说的移动端无法拖动进度条的问题.现在更新的代码已经加上touch事件,即无论是手机模式 ...
html select 修改默认箭头样式,自定义select标签箭头样式
select::-ms-expand{ display: none; }//ie样式清除 select{ appearance:none; -moz-appearance:none; -webkit- ...
HTML怎么在li中加select标签,自定义UL LI选择框似乎在其他HTML元素后面
我似乎无法弄清楚为什么我的自定义UL LI选择框出现在其他HTML元素后面.你如何解决这个问题,当用户点击选择框时,它会出现在其他页面元素的顶部? 这里是手头的问题的一个画面: 下面是一个描绘所期望的 ...
html select样式修改,select标签的默认样式修改
在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通 ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery美化select，自定义下拉框样式
select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...
自定义select标签
1:定义tid文件 <tag><name>select</name><tag-class>com.zhoujun.jsp.day02.SelectTag ...
JSP自定义select标签中取值
JSP自定义select标签的取值 select取值是通过name属性获取. 自定义标签的流程: 1.继承JSP标签的标签类TagSupport,SimpleTagSupport等,重写dostart ...
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引用养殖场模型进行展示,轨道控制器设置,模型沿着路线运动,使用OutlinePass给模型添加边框,自定义样式显示标签,点击模型 ...

select 标签自定义样式

vue3 里面的html结构

vue3 script setup里面

vue3 style

outline属性

select 标签自定义样式相关推荐

最新文章

热门文章