这是我参与「第五届青训营 」伴学笔记创造活动的第 9 天

款式规划

下图是我需求复现的dropselect款式（的其间一部分，泪奔）

做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也无边框，真的老好看了，你看便是这样

做dropselect的单选样式记录 | 青训营笔记

嗯，所以高级仍是要box-shadow一起合作才行

optionlist-item

已选状况的✅怎样画

画✅又能够运用html自带字符&#10003，&#10004，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

选项，描绘以及表明已选状况的✅应当怎样摆放

呜呜呜这个花了我真的好长时间

做dropselect的单选样式记录 | 青训营笔记
像这样选项和已选状况✅在一行显示，两端对齐的很好处理，只需求在父容器optionlist-item中设定 justify-content: space-between;即可

可是假如加上描绘，那便是惨兮兮的这个姿态

做dropselect的单选样式记录 | 青训营笔记

怎样让它契合规划文档要求，也便是呈现出下面这个契合要求的姿态呢？

做dropselect的单选样式记录 | 青训营笔记

感谢chatgpt，它告诉我了一个奇技淫巧

.optionlist-item {
      display: flex;
      flex-direction: column;
      align-items: left;
      &--selected {
          margin-left: auto;
      }
}

当然假如仅仅这样的话，就会呈现这种作用

做dropselect的单选样式记录 | 青训营笔记

我怎样让选择时和未选时的描绘与选项标题空地保持一致呢？这个空地是什么？

我试验了一下 .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实心和空心箭头