款式规划
下图是我需求复现的dropselect款式（的其间一部分，泪奔）
款式拆解
dropselect可分为两个div容器，
其间一个.dropinput包括
-
input：会回显所选文字（单选）或寄存所选选项的容器（多选） -
.clearable悉数清空，以及 - 一个能够改动状况的下拉（上拉）箭头，
另一个div（也即
.optionlist)中寄存各个optionlist-item
款式中需求处理的问题有：
- 整体
disabled款式怎样继承 - input
- 怎样将光标躲藏
- 怎样增加下拉空心箭头
- clearable的叉怎样画
- div-scroll
- 怎样把scroll的翻滚条躲藏
- 怎样做出暗影，和高级的无边框
- optionlist-item
- 完结状况的✅怎样画
- 鼠标方式怎样改动
- 选项，描绘以及表明已选状况的✅应当怎样摆放
问题详解
整体disabled款式怎样继承
首先要将鼠标款式改为禁用
cursor: not-allowed !important;
其次，在dropinput中完成
cursor:inherit
border:inherit
该部分代码如下：
.disabled {
cursor: not-allowed !important;
.dropinput {
input,
&--input-box {
color: $--font-color-disabled;
background-color: rgba($--color-disabled, 0.4);
border: 1px solid #e9e9e9 !important;
}
}
}
dropinput
怎样将光标躲藏
运用该代码将光标色彩改为透明，
caret-color:transparent;
而当需求光标时，再将其改为字体色彩
.my-dropselect {
&-multiple-search {
input {
caret-color: $--font-color-main;
}
}
}
怎样将原有的focus-visible自带的焦点框去除？
这个问题困扰了我很长时间，不论怎样在浏览器中debug我都看不到这个焦点框到底是个什么鬼东西，总算，我想起之前的一个坑：它有没有可能是outline？
我去找了iview的源码看了一下，嗯，它便是outline，所以运用outline:none;就能够完美达到意图了，喜极而泣，喜大普奔，内牛满面…
怎样增加下拉空心箭头
运用css能够利用border画出下拉箭头和上拉箭头
&-down {
width: 3px;
height: 3px;
position: absolute;
left: 0;
top: 0;
z-index: 2; /*兼容ie8-*/
border: 1px solid #b0b0b0;
border-width: 1px 1px 0 0;
transform: rotate(135deg);
// margin-bottom:10px;
}
&-up {
width: 3px;
height: 3px;
position: absolute;
left: 0;
bottom: 0;
z-index: 2; /*兼容ie8-*/
border: 1px solid #b0b0b0;
border-width: 1px 0 0 1px;
transform: rotate(45deg);
}
}
更改width和height可改动大小
clearable的叉怎样画
&--clearable {
&::before,
&::after {
position: absolute;
content: ' ';
background-color: #b0b0b0;
left: 12px;
width: 1px;
height: 12px;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
都是用scss写的，其实是class，相当于
.clearable {
::before,
::after {
position: absolute;
content: ' ';
background-color: #b0b0b0;
left: 12px;
width: 1px;
height: 12px;
}
::before {
transform: rotate(45deg);
}
::after {
transform: rotate(-45deg);
}
div-scroll
怎样把scroll的翻滚条躲藏并保存功用
做成scroll的方式信任大家都知道，便是 overflow-y: auto;
那么怎样把scroll的翻滚条躲藏呢？
有的答案说 overflow-y: hidden;但这样就没办法完成翻滚功用了
怎样将翻滚条躲藏并保存功用：
.--optionlist {
/* 躲藏 Chrome、Safari 和 Opera 的翻滚条 */
&::-webkit-scrollbar {
display: none;
}
/* 以上的对IE不兼容，所以需求再增加下面两行代码 */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
将翻滚变得顺滑
运用scroll-behavior: smooth;
怎样做出暗影，和高级的无边框
暗影能够运用
box-shadow : 0 0 5px 4px #yourcolor;
色彩能够选择主题色彩叠加白色/黑色（视主题不同）透明度20%左右的色彩
无边框，border:none; 呜呜呜这个做出来真的高级,谁用谁知道，要不是规划稿要求，我都想让input也无边框，真的老好看了，你看便是这样
嗯，所以高级仍是要box-shadow一起合作才行
optionlist-item
已选状况的✅怎样画
画✅又能够运用html自带字符✓，✔，css里是\2173这些能够作为字体进行编辑；
又能够用css原生画出来
&-selected {
width: 3px;
height: 6px;
border-right: 2px solid $--font-color-disabled;
border-bottom: 2px solid $--font-color-disabled;
transform: rotate(40deg);
color: $--font-color-disabled;
}
鼠标方式怎样改动
cursor:pointer
选项，描绘以及表明已选状况的✅应当怎样摆放
呜呜呜这个花了我真的好长时间
justify-content: space-between;即可
可是假如加上描绘，那便是惨兮兮的这个姿态
怎样让它契合规划文档要求，也便是呈现出下面这个契合要求的姿态呢？
感谢chatgpt，它告诉我了一个奇技淫巧
.optionlist-item {
display: flex;
flex-direction: column;
align-items: left;
&--selected {
margin-left: auto;
}
}
当然假如仅仅这样的话，就会呈现这种作用
我怎样让选择时和未选时的描绘与选项标题空地保持一致呢？这个空地是什么？
我试验了一下
.optionlist-item{gap:10px;}
发现的确空地变大了，可是将其设置为0，仍然没有办法紧贴在一起，仍是会呈现上图的作用。
苦思冥想，我觉得应该让span标签在以列摆放的弹性布局中叠起来，怎样叠起来呢？
运用更改margin-top或margin-bottom就能够叠起来了,再次喜大普奔TAT
代码如下：
.optionlist-item {
display: flex;
flex-direction: column;
align-items: left;
gap:0;
&--selected {
margin-left: auto;
margin-top: -4px;
margin-bottom: -4px;
}
&-description {
margin-top: -4px;
}
参阅链接
-
躲藏翻滚条但保存功用
-
justify-content
-
常用的HTML和CSS content属性特别字符归纳
-
CSS完成对号
-
CSS完成叉号
-
CSS完成div实心和空心箭头
