当前位置:主页 > JavsScript库 > 表单 >

自定义下拉菜单替换本地选择元素 - cSelect
栏目分类:表单   发布日期:2021-09-22   浏览次数:

cSelect 是一个自定义选择 JavaScript 库,它用可自定义、可过滤的下拉列表替换本机选择元素。

使用:

1. 导入 cSelect。

import CSelect from './cselect.js';

2. 将现有的选择元素转换为自定义下拉列表。

<select class="custom-select" name="testSelect" id="c-select" placeholder="Please select an option">
  <option disabled selected value> -- select an option -- </option>
  <option value="walls">The walls were shaking</option>
  <option value="earth">The earth was quaking</option>
  <option disabled value="mind">My mind was aching</option>
  <option value="cause-you">Cause you</option>
  <option value="shook">SHOOK ME ALL NIGHT LONG!</option>
</select>
const select = document.querySelector('.custom-select');
const cSelect = new CSelect(select, {
      // options here
});

3. 确定是否启用开/关动画。

const cSelect = new CSelect(select, {
      animated: true,
});

4. 确定是否开启实时搜索功能

const cSelect = new CSelect(select, {
      search: true,
});

5. 将自定义样式应用于下拉列表。

.cSelect {
  position: relative;
}
 
.cSelect * {
  box-sizing: border-box;
}
 
.cSelect:focus {
  outline: 2px solid #2686f4;
}
 
.cSelect__default {
  display: flex;
  align-items: center;
  border-radius: 3px;
  font-size: 14px;
  height: 50px;
  padding: 16px 2em;
  background: #fff;
  box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
 
.cSelect__label-arrow {
  position: relative;
  margin-left: auto;
}
 
.cSelect__label-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: translateY(-65%) rotate(135deg);
}
 
.cSelect__drop {
  position: absolute;
  width: 100%;
  height: 0;
  max-height: 300px;
  left: 0;
  top: 57px;
  transition: height, 0.25s;
}
 
.cSelect__results {
  height: 100%;
  overflow-y: auto;
}
 
.cSelect__search {
  position: relative;
  height: 0;
  overflow: hidden;
  outline: none;
}
 
.cSelect__search--animated {
  transition: height, 0.25s;
}
 
.cSelect__drop--open .cSelect__search {
  height: 50px;
}
 
.cSelect__search-input {
  width: 100%;
  padding: 16px 2em;
  background-color: #fff;
  font-size: 14px;
  height: 50px;
  border: none;
}
 
.cSelect__search-input:focus {
  border: 2px solid #2686f4;
}
 
.cSelect__search-icon {
  position: absolute;
  right: 1.75em;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 16px;
  height: 16px;
}
 
.cSelect__search-icon::before,
.cSelect__search-icon::after {
  content: '';
  display: block;
  box-sizing: border-box;
  transition-property: background-color, border-color;
  transition-duration: 0.25s;
}
 
.cSelect__search-icon::before {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #999;
}
 
.cSelect__search-icon::after {
  margin: 0 auto;
  width: 2px;
  height: 6px;
  background-color: #999;
}
 
.cSelect__search-input:focus ~ .cSelect__search-icon::before {
  border-color: #9226f4;
}
 
.cSelect__search-input:focus ~ .cSelect__search-icon::after {
  background-color: #9226f4;
}
 
.cSelect__option {
  padding: 16px 2em;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-size: 14px;
  min-height: 17px;
}
 
.cSelect__option:hover {
  background-color: rgb(236, 236, 236);
}
 
.cSelect__option.selected {
  color: #fff;
  background-color: #9226f4;
}
 
/* needs to be after selected */
.cSelect__option.disabled {
  color: #c6c6c6;
  background-color: #f8f8f8;
  cursor: not-allowed;
}

官方网站:https://github.com/Vigorski/cSelect

相关热词: cSelect下拉菜单

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库