在vue页面中使用伪元素进行 气泡框|单选框自定义|滚动条自定义
1. 基于vue,使用到的图标是element plus
2. vue单页面代码
<template>
<h1>{{ msg }}</h1>
<div className="error-message">
<el-icon :size="20" :color="'blue'">
<edit />
</el-icon>系统异常,请稍后再试
</div>
<!-- 气泡框 -->
<div className="container">
<div className="box top-arrow">Top </div>
<div className="box right-arrow">Right</div>
<div className="box bottom-arrow">Bottom</div>
<div className="box left-arrow">Left</div>
</div>
<!-- 单选框自定义 -->
<div className="container">
<div>
<input type="checkbox" id="backend" />
<label htmlFor="backend">后端开发</label>
</div>
<div>
<input type="checkbox" id="backend" />
<label htmlFor="backend">后端开发</label>
</div>
<div>
<input type="checkbox" id="frontend" />
<label htmlFor="checkbox">前端开发</label>
</div>
<div>
<input type="checkbox" id="frontend" />
<label htmlFor="checkbox">前端开发</label>
</div>
</div>
<!-- 浏览器中自定义滚动条 -->
<div class="container2">
<div class="rect">
<div class="box"></div>
</div>
<div class="rect2">
<div class="box"></div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Edit } from '@element-plus/icons'
defineProps({
msg: String
})
const count = ref(0)
</script>
<style scoped lang="scss">
.error-message {
position: relative;
color: #666666;
padding: 12px 30px;
background-color: #FFECE4;
border-radius: 5px;
}
.error-message::before {
content: '::before伪元素';
}
.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
.box {
width: 150px;
height: 100px;
background-color: red;
color: white;
position: relative;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
.box::after {
content: '';
width: 0;
height: 0;
position: absolute;
}
.box.bottom-arrow::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 12px solid red;
left: 22px;
top: -10px;
}
.box.right-arrow::after {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 12px solid red;
top: 22px;
left: -10px;
}
.box.left-arrow::after {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 12px solid red;
top: 22px;
right: -10px;
}
.box.top-arrow::after {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 12px solid red;
left: 22px;
bottom: -10px;
}
}
// 自定义复选框样式
input[type="checkbox"] {
margin: 0;
}
#frontend {
opacity: 0;
}
#frontend+label {
margin-left: -12px;
pointer-events: none;
}
#frontend+label::before {
content: '\a0';
display: inline-block;
vertical-align: 0.1em;
width: 0.8em;
height: 0.8em;
border-radius: 0.2em;
background-color: silver;
text-indent: 0.15em;
line-height: 0.65;
cursor: pointer;
}
#frontend:checked+label::before {
content: '\2713';
background-color: yellowgreen;
}
.container2 {
display: flex;
justify-content: space-around;
.rect,
.rect2 {
width: 200px;
height: 200px;
overflow: scroll;
border: 1px solid gainsboro;
}
.rect2::-webkit-scrollbar {
width: 10px;
height: 0;
background-color: transparent;
}
.rect2::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.08);
border-left: 4px solid transparent;
background-clip: padding-box;
}
.rect2::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.08);
border: 0;
}
.box {
width: 100px;
height: 300px;
background-color: aliceblue;
}
}
</style>
2023.04.26更新一个新的气泡框添加创建方式
child3是所在框的class名
.child3::before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 10px solid;
border-color: rgba(20, 102, 166, 0.85) transparent transparent transparent;
//transparent放在不同位置改变箭头方向
left:88px;
top: 51px;
}