auto-resize-custom-select/docs/examples/examples.css

Auto resize drop-down select elements to match the width of the selected option and customize it with CSS

html,body,h1,h2,h3,ul,li,pre,details{margin:0;padding:0}html{line-height:1;text-size-adjust:100%;box-sizing:border-box;font-size:62.5%}body{font-size:1.4rem;font-family:sans-serif;line-height:1.4;max-width:96rem;margin:2rem auto;padding:0 2rem;background:#eee}*,*:before,*:after{box-sizing:inherit;background-repeat:no-repeat}header,footer{color:#333;text-shadow:0 1px 0 rgba(255,255,255,0.8)}header a,footer a{color:#09c;text-decoration:none}header a:hover,footer a:hover{color:#000;text-decoration:underline}header h2{margin:0 0 1rem;font-weight:500}footer ul ul{padding:.5rem 0 1rem 1rem}footer ul li{list-style:none}footer ul li ul li{list-style:square inside}main{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch}main>section{flex:0 0 auto;border:dashed #999 1px;border-radius:3px;padding:2rem;width:calc(49%);margin-bottom:2rem}main>section>div{min-height:4rem;margin:0 0 1rem 0}main>section>pre{display:block}main>section>pre>code{height:100%;border-radius:4px;padding:2rem;font-size:1.2em}main>section>pre .hljs{padding:1em}main>section.no-code>div{min-height:auto;margin:0}main>section.no-code>pre{display:none}@media screen and (max-width:620px){main>section{width:100%}}.beau-selecteur{border:solid #333 1px;border-radius:3px;padding:.5rem 1rem}.win95{background:#fff;border-top:solid #868b8f 2px;border-left:solid #868b8f 2px;border-bottom:solid #daddde 2px;border-right:solid #daddde 2px;box-shadow:inset 2px 2px 0 0 #000002,inset -2px -2px 0 0 #c3c4c6;padding:2px}.win95 .selection{padding:2px 8px;font-family:sans-serif;text-decoration:none}.win95 .arrow{padding:2px 8px;background:#c2c7cb;border-top:solid #c8c9cb 2px;border-left:solid #c8c9cb 2px;border-bottom:solid #000002 2px;border-right:solid #000002 2px;box-shadow:inset 2px 2px 0 0 #fcffff,inset -2px -2px 0 0 #868a8e}.win95 .arrow:after{content:'▾'}.xp{background:#fff;border:solid #859bb5 1px;padding:1px}.xp .selection{color:#4c5e88;font-family:sans-serif;text-decoration:none;padding:0 20px 0 8px}.xp .arrow{background-image:linear-gradient(135deg, #d5e2fd, #b3c9f9);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)}.xp .arrow:after{content:'';display:block;width:19px;height:27px;margin:0 0 0 2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E %3Cpath fill='none' stroke='%234c5e88' stroke-linecap='square' stroke-width='10' d='M10 10l20 20 20-20'/%3E %3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px auto}.aero{background-color:#eee;background-image:linear-gradient(to bottom, #f1f1f1 0, #ececec 50%, #dedede 51%, #cfcfcf 100%);border:solid #707070 1px;border-radius:4px;box-shadow:inset 0 0 0 1px #fff;padding:4px 6px;color:#090000;text-shadow:0 1px 1px rgba(255,255,255,0.5)}.aero .selection{font-family:sans-serif;text-decoration:none;padding:0 10px 0 0}.metro{border:solid #797979 2px;padding:8px 8px 8px 10px}.metro .selection{font-family:sans-serif;text-decoration:none;padding:0 16px 0 0;color:#555}.metro .arrow:after{content:'';display:block;width:16px;height:16px;margin:0 0 0 2px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E %3Cpath fill='none' stroke='%23797979' stroke-linecap='square' stroke-width='10' d='M10 10l20 20 20-20'/%3E %3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:15px auto}.aqua{background:#fff;border:solid #6a96d5 2px;border-radius:5px;overflow:hidden;box-shadow:0 0 10px -2px #6a96d5}.aqua .selection{font-family:sans-serif;font-weight:700;text-decoration:none;color:#5d5f6b;padding:4px 10px}.aqua .arrow{background-image:linear-gradient(180deg, #c0d7f1 0, #96beee 50%, #c2ecfd 100%);border-left:solid #7fa9df 1px;padding:4px 8px}.aqua .arrow:after{color:#626262;content:'▾'}