当 select 选择一个选项时,项目符号点出现在多 select 下拉框下方
Bullet points appear below a multi select drop down box when selecting an option
我正在构建一个 angular(7 是版本)页面,其中包含我正在使用的多个 select 下拉菜单 ng-multiselect-dropdown. Please see the below picture - 当我单击下拉菜单并尝试select 或 unselect 一个选项,然后这些蓝点出现(仅当 selecting 或取消选择时)。知道如何摆脱它们吗?如果我检查该元素,它不会提供任何线索。
注意:我对 multi-select-dropdown 样式做了一些自定义,尝试删除它们,但这并没有解决这个问题。
<ng-multiselect-dropdown name="selectedOptions"
tabindex="3"
[data]="dropdownList"
[(ngModel)]="selectedOptions"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>
css
.multiselect-dropdown .dropdown-btn {
display: inline-block;
border: 1px solid #ccc !important;
border-radius: 4px;
box-shadow: none;
color: #333;
width: 100%;
padding: 6px 14px;
margin-bottom: 0;
font-weight: 400;
line-height: 1.52857143;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-image: none;
}
.multiselect-dropdown:focus {
outline: 0px !important;
outline-style: none !important;
}
.multiselect-dropdown .dropdown-btn span.ng-star-inserted { padding-right: 14px; }
.multiselect-dropdown .dropdown-btn .dropdown-down {
display: inline-block;
top: 5px;
width: 0;
height: 0;
border-top: 5px solid #aaa;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.multiselect-dropdown .dropdown-btn .dropdown-up {
/*display: inline-block;*/
width: 0;
height: 0;
border-bottom: 5px solid #aaa;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.multiselect-dropdown .dropdown-btn .selected-item {
background: #111 !important;
border: 1px solid #111 !important;
border-radius: 3px !important;
color: #fff;
float: left;
margin: 0 1px 1px 0 !important;
padding: 0 5px;
}
.multiselect-dropdown .dropdown-btn .selected-item:hover {
background-color: #00a7ea !important;
border-color: transparent !important;
}
.multiselect-item-checkbox input[type="checkbox"] + div:before {
box-sizing: content-box;
content: '';
color: #111 !important;
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -9px;
border: 2px solid #111 !important;
text-align: center;
transition: all .4s ease;
}
.multiselect-item-checkbox input[type="checkbox"]:checked + div:before {
-webkit-animation: .2s ease-in borderscale;
animation: .2s ease-in borderscale;
background: #111 !important;
}
通过向 ng-multiselect-dropdown 添加 class="multiselect-dropdown" 然后覆盖 'focus' 样式解决了上述问题。
.multiselect-dropdown:focus {
outline: 0px !important;
outline: -webkit-focus-ring-color auto 1px;
outline: 0px solid #111;
}
我正在构建一个 angular(7 是版本)页面,其中包含我正在使用的多个 select 下拉菜单 ng-multiselect-dropdown. Please see the below picture -
<ng-multiselect-dropdown name="selectedOptions"
tabindex="3"
[data]="dropdownList"
[(ngModel)]="selectedOptions"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>
css
.multiselect-dropdown .dropdown-btn {
display: inline-block;
border: 1px solid #ccc !important;
border-radius: 4px;
box-shadow: none;
color: #333;
width: 100%;
padding: 6px 14px;
margin-bottom: 0;
font-weight: 400;
line-height: 1.52857143;
text-align: left;
vertical-align: middle;
cursor: pointer;
background-image: none;
}
.multiselect-dropdown:focus {
outline: 0px !important;
outline-style: none !important;
}
.multiselect-dropdown .dropdown-btn span.ng-star-inserted { padding-right: 14px; }
.multiselect-dropdown .dropdown-btn .dropdown-down {
display: inline-block;
top: 5px;
width: 0;
height: 0;
border-top: 5px solid #aaa;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.multiselect-dropdown .dropdown-btn .dropdown-up {
/*display: inline-block;*/
width: 0;
height: 0;
border-bottom: 5px solid #aaa;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
.multiselect-dropdown .dropdown-btn .selected-item {
background: #111 !important;
border: 1px solid #111 !important;
border-radius: 3px !important;
color: #fff;
float: left;
margin: 0 1px 1px 0 !important;
padding: 0 5px;
}
.multiselect-dropdown .dropdown-btn .selected-item:hover {
background-color: #00a7ea !important;
border-color: transparent !important;
}
.multiselect-item-checkbox input[type="checkbox"] + div:before {
box-sizing: content-box;
content: '';
color: #111 !important;
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -9px;
border: 2px solid #111 !important;
text-align: center;
transition: all .4s ease;
}
.multiselect-item-checkbox input[type="checkbox"]:checked + div:before {
-webkit-animation: .2s ease-in borderscale;
animation: .2s ease-in borderscale;
background: #111 !important;
}
通过向 ng-multiselect-dropdown 添加 class="multiselect-dropdown" 然后覆盖 'focus' 样式解决了上述问题。
.multiselect-dropdown:focus {
outline: 0px !important;
outline: -webkit-focus-ring-color auto 1px;
outline: 0px solid #111;
}