选择框css,纯CSS自定义选择框

css

/* See "View Compiled CSS" for raw CSS ---> */

:root {

--dark: #212121;

--dark-contrast: #424242;

--light: #fafafa;

--light-contrast: #cfd8dc;

--accent: #2196f3;

}

*,

::after,

::before {

box-sizing: border-box;

}

html {

font-family: 'Roboto', sans-serif;

font-size: 1rem;

line-height: 1.5;

}

body {

display: grid;

place-items: center;

margin: 0;

height: 100vh;

background-color: var(--dark);

}

ul, li {

margin: 0;

padding: 0;

list-style: none;

}

.select {

display: flex;

align-items: center;

width: 100%;

max-width: 300px;

background-color: var(--dark-contrast);

color: #fff;

box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);

cursor: pointer;

user-select: none;

padding: 1.25rem 1.5rem;

border-radius: 4px;

}

.select:focus {

outline: 0;

}

.select:focus .list {

opacity: 1;

transform: translate(-50%, -50%) scale(1);

pointer-events: all;

}

.select:hover {

background-color: #484848;

}

.select:focus {

background-color: #4f4f4f;

transition: 400ms ease;

}

.select::after {

content: '';

display: inline-block;

margin-left: auto;

border-left: .3755rem solid transparent;

border-right: .3755rem solid transparent;

border-top: .375rem solid #fff;

}

.select .list {

position: fixed;

top: 50%;

left: 50%;

max-height: 256px;

width: clamp(300px, 75vw, 320px);

border-radius: 4px;

background-color: var(--light);

color: #000;

transform: translate(-50%, -50%) scale(0);

transition: all 400ms ease;

opacity: 0;

pointer-events: none;

overflow: hidden;

overflow-y: auto;

}

.select .list .group {

padding: .75rem 0;

}

.select .list .group:not(:last-child) {

border-bottom: 1px solid #e1e1e1;

}

.select .list label {

display: flex;

align-items: center;

padding: 1.25rem 1.5rem;

cursor: pointer;

}

.select .list label:hover {

background-color: #ededed;

}

.select .list label:active {

background-color: #e1e1e1;

transition: 400ms ease;

}

.select .list label input[type=radio] {

margin-right: 1rem;

}

input[type=radio] {

position: relative;

height: 24px;

width: 24px;

margin: 0;

border-radius: 50%;

border: solid 1px var(--light-contrast);

background-color: transparent;

appearance: none;

cursor: pointer;

}

input[type=radio]:checked {

border: none;

background-color: var(--accent);

}

input[type=radio]:checked::before {

display: block;

}

input[type=radio]:focus {

outline: 0;

}

input[type=radio]::before {

content: '';

position: absolute;

top: 50%;

left: 50%;

display: none;

width: 50%;

height: 50%;

border-radius: 50%;

background-color: var(--light);

transform: translate(-50%, -50%);

}