12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- .select-title {
- padding-left: 10px;
- width: calc(100%-10px);
- height: 30px;
- line-height: 30px;
- color: #fff;
- border-bottom: solid 1px #5B5B5B;
- }
- .select-title::after{
- content: "";
- display: block;
- float: right;
- width: 20px;
- height: 100%;
- /* background-color: aqua; */
- background-image: url("./icon.svg");
- background-repeat: no-repeat;
- background-size: contain;
- background-position: 50% 50%;
- }
- .select-title-open::after{
- transform: scaleY(-1);
- }
-
- .select-dropList {
- position: absolute;
- top: 40px;
- margin-top: 1px;
- padding-top: 10px;
- padding-bottom: 10px;
- width: 100%;
- height: 250px;
- max-height: 400px;
- overflow: hidden;
- overflow-y: auto;
- background-color: #181818;
- z-index: 99;
- transition: all 0.3s ease 0s;
- }
-
- .select-dropList::-webkit-scrollbar {
- width: 3px;
- /* background-color: #666; */
- }
-
- .select-dropList::-webkit-scrollbar-thumb {
- background-color: #b5b5b5;
- }
-
- .select-dropList-close {
- visibility: hidden;
- opacity: 0;
- transform: translateY(-40px);
- }
-
- .select-dropList-open {
- visibility: visible;
- opacity: 1;
- transform: translateY(0px);
- }
-
- .select-listItem {
- margin-left: 20px;
- color: #999999;
- font-size: 16px;
- line-height: 30px;
- cursor: pointer;
- }
-
-
- .select-listItem:hover {
- color: #fff;
- }
- @media screen and (max-width:800px) {
- .select-listItem{
- font-size:12px;
- }
-
- }
|