<select aria-label="potion selector">
<button>
<selectedcontent></selectedcontent>
</button>
<div class="items">
<option value="health">
<div class="potion-holder">
<svg class="icon icon-health" aria-hidden="true">
<use xlink:href="#potion" />
</svg>
</div>
<span>Health</span>
</option>
<option value="mana">
<div class="potion-holder">
<svg class="icon icon-mana" aria-hidden="true">
<use xlink:href="#potion" />
</svg>
</div>
<span>Mana</span>
</option>
<option value="stamina">
<div class="potion-holder">
<svg class="icon icon-stamina" aria-hidden="true">
<use xlink:href="#potion" />
</svg>
</div>
<span>Stamina</span>
</option>
<option value="strength">
<div class="potion-holder">
<svg class="icon icon-strength" aria-hidden="true">
<use xlink:href="#enhancement" />
</svg>
</div>
<span>Strength</span>
</option>
<option value="fortify">
<div class="potion-holder">
<svg class="icon icon-fortify" aria-hidden="true">
<use xlink:href="#enhancement" />
</svg>
</div>
<span>Fortify</span>
</option>
<option value="frenzy">
<div class="potion-holder">
<svg class="icon icon-frenzy" aria-hidden="true">
<use xlink:href="#enhancement" />
</svg>
</div>
<span>Frenzy</span>
</option>
</div>
</select>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 0; height: 0; visibility: hidden; position: absolute;" aria-hidden="true">
<symbol id="potion" viewBox="0 0 18 30">
<g>
<path fill="#e0e1e0" d="M15.6 15.96h-.07c-.18-.02-.35-.04-.51-.05-.04 0-.08 0-.12-.01l-.43-.03c-.16-.01-.31-.02-.45-.02h-.28c-1.79-.09-3.58.3-5.16 1.15-1.48.71-3 1.44-7 1.1l-.36-.03-.21-.03c.85-2.24 2.63-4 4.89-4.82.05-.02.09-.07.09-.12V6.03c0-.07-.05-.13-.12-.13-.77 0-1.39-.63-1.38-1.39 0-.76.62-1.38 1.38-1.38h6.06c.77 0 1.39.63 1.38 1.39 0 .76-.62 1.38-1.38 1.38-.07 0-.13.05-.13.12v7.07c0 .05.03.1.09.12 1.48.53 2.78 1.48 3.73 2.74Z" />
<path fill="#cac8c7" d="M12 13.21s-.08-.07-.08-.12V6.03c0-.07.05-.12.12-.13.36 0 .7-.15.94-.41.25-.26.39-.61.39-.98a1.37 1.37 0 0 0-1.34-1.39L10.99 3c.46.22 0 .44 0 1 0 .37.25-.26 0 0s-.15 0-.5 0c-.07 0-.5-.07-.5 0v8.97c0 .05.03.1.08.12 1.44.54 2.69 1.49 3.59 2.74h-.07c-.17-.02 1.41.17.19.01-.09-.01.17 0 .27 0 .14 0 .29.01.44.02.14 0 .28.02.42.03.04 0 .08 0 .12.01.16.02.33.03.5.05h.07c-.9-1.25-2.15-2.2-3.59-2.74Z" />
<path fill="var(--potion-color)" d="M17.33 21.17c0 4.67-3.77 8.46-8.44 8.47S.43 25.87.42 21.2v-.03c0-.98.16-1.96.48-2.89.12.02.24.03.36.04l.28.03.35.03c.78.06 1.45.07 2.06.06.32-.01.61-.03.88-.06.62-.05 1.24-.17 1.84-.34.18-.05.35-.11.51-.16.51-.19 1-.41 1.48-.65.38-.18.75-.36 1.16-.52.16-.07.33-.13.5-.18 1.46-.42 2.98-.55 4.49-.38.31.03.64.06.98.1 1 1.45 1.54 3.17 1.53 4.94Z" />
<path fill="var(--support-color)" d="M15.8 16.23c-.34-.04-.67-.07-.98-.1-.23-.02-.44-.03-.65-.04a8.559 8.559 0 0 1 1.24 4.49 8.412 8.412 0 0 1-9.94 8.31c4.26 1.89 9.25-.04 11.14-4.31.48-1.08.72-2.25.72-3.43 0-1.76-.52-3.49-1.53-4.94Z" />
<path fill="#616262" d="M12 .5H6L7 4h4l1-3.5z" />
<path fill="#4d4d4d" d="M10.71.5 10 3H6.71L7 4h4l1-3.5h-1.29z" />
<path d="M2.74 23.5c-.23 0-.43-.16-.49-.38C2.08 22.43 2 21.72 2 21c0-.35.02-.71.06-1.06.03-.27.28-.47.55-.44.27.03.47.28.44.55-.03.31-.05.63-.05.94 0 .63.07 1.27.22 1.88.06.27-.1.54-.37.6-.04 0-.08.01-.12.01ZM5 26.5a.46.46 0 0 1-.33-.13c-.37-.32-.71-.68-1.01-1.06-.17-.22-.14-.53.08-.7s.53-.14.7.08c.27.34.57.65.9.94.21.18.23.5.04.71a.48.48 0 0 1-.37.17Z" class="cls-5" />
</g>
<path fill="#010101" d="M12.5 12.66V6.44A2.012 2.012 0 0 0 13.94 4c-.23-.88-1.02-1.5-1.94-1.5h-.05l.53-1.86a.501.501 0 0 0-.34-.62C12.09 0 12.05 0 12 0H6c-.28 0-.5.22-.5.5 0 .05 0 .09.02.14l.53 1.86H6c-1.1 0-2 .9-2 2 0 .91.62 1.71 1.5 1.94v6.22A8.845 8.845 0 0 0 0 21a9 9 0 0 0 18 0 8.845 8.845 0 0 0-5.5-8.34ZM11.34 1l-.71 2.5H7.38L6.67 1h4.67ZM6.17 13.47c.2-.07.33-.26.33-.47V6c0-.28-.22-.5-.5-.5-.55 0-1-.45-1-1s.45-1 1-1h.34l.18.64c.06.21.26.36.48.36h4c.22 0 .42-.15.48-.36l.18-.64H12c.55 0 1 .45 1 1s-.45 1-1 1c-.28 0-.5.22-.5.5v7c0 .21.13.4.33.47 1.12.4 2.14 1.06 2.96 1.92-3.41-.23-4.86.46-6.27 1.14-1.49.72-2.91 1.39-6.79 1.05a7.736 7.736 0 0 1 4.43-4.1ZM9 29c-4.42 0-7.99-3.58-8-8 0-.83.12-1.66.36-2.46.86.08 1.61.12 2.28.12 1.85.06 3.68-.37 5.31-1.24 1.47-.7 2.87-1.37 6.7-.96a8.116 8.116 0 0 1 1.34 4.53c0 4.42-3.58 7.99-8 8Z" />
</symbol>
<symbol id="enhancement" viewBox="0 0 19 30.11">
<g>
<path fill="#e0e1e0" d="M14.11 15.55c-2.7-.19-3.53.38-4.4.99-.89.61-1.81 1.25-5.04 1.06l2.63-6.23.02-.11V5.72c0-.13-.11-.21-.24-.22-.62 0-1.13-.56-1.13-1.25S6.46 3 7.09 3h4.81s.06 0 .09-.02c.03.01.06.02.1.02h.45c.63 0 1.14.56 1.14 1.25s-.51 1.25-1.14 1.25c-.12 0-.23.11-.23.25v5.5l.02.11 1.76 4.18Z" />
<path fill="#cac8c7" d="M12.01 2.98s-.06.02-.09.02h-1.38c.65.04 1.14.6 1.1 1.25.04.65-.46 1.21-1.1 1.25-.13 0-.23.12-.22.25v5.5l.02.12 1.71 4.18c1.33-.3-.62-.19 2 0l-1.71-4.18-.02-.12v-5.5c0-.13.09-.24.22-.25.65-.04 1.14-.6 1.1-1.25.04-.65-.46-1.21-1.1-1.25" />
<path fill="var(--potion-color)" d="M17.94 26.49c-1.63 1.99-4.22 2.87-8.39 2.87s-6.76-.89-8.39-2.87c-.41-.52-.49-1.23-.21-1.83l2.89-6.36c.5.03.96.05 1.38.05 2.62 0 3.52-.58 4.41-1.15.91-.58 1.77-1.14 4.72-.92l3.81 8.38c.28.6.2 1.31-.21 1.83Z" />
<path fill="var(--support-color)" d="m18.15 24.67-3.66-8.38c-.68-.06-1.35-.06-2.03-.01l3.34 7.64c.27.6.19 1.3-.2 1.83-1.57 1.98-4.06 2.87-8.07 2.87-1.14.01-2.28-.08-3.41-.28 1.45.7 3.32 1.03 5.76 1.03 4.02 0 6.51-.89 8.07-2.87.39-.52.47-1.23.2-1.83Z" />
<path fill="#616262" d="M12.44 0H6.56l.98 4h3.92l.98-4z" />
<path fill="#4d4d4d" d="m11.18 0-.7 3H7.26l.28 1h3.92l.98-4h-1.26z" />
<path d="M2.65 25.61c-.27 0-.49-.22-.49-.5 0-.07.01-.14.04-.2l.65-1.5c.11-.25.4-.37.65-.25.25.11.36.41.25.66l-.65 1.5c-.08.18-.25.3-.45.3ZM4.17 22.11c-.27 0-.49-.22-.49-.5 0-.07.01-.14.04-.2l.43-1c.11-.25.4-.37.65-.25.25.11.36.41.25.66l-.43 1c-.08.18-.25.3-.45.3Z" class="cls-8" />
</g>
<path fill="#010101" d="M18.77 24.35 13.33 11.5V6.55c.64-.28 1.27-1.37 1-2.44-.22-.88-1-1.5-1.9-2.11h-.05L12.9.75a.51.51 0 0 0-.34-.62c-.04-.01-.09-.02-.13-.13H6.56c-.27.11-.49.34-.49.61 0 .05 0 .09.02.14L6.61 2h-.05C5.48 2.61 4.6 3.51 4.6 4.61c0 .91.6 1.71 1.72 1.94v4.95L.23 24.35c-.4.86-.28 1.88.31 2.62 1.78 2.17 4.54 3.14 8.96 3.14s7.17-.97 8.96-3.14c.59-.74.71-1.76.31-2.62ZM11.79 1l-.7 3H7.91l-.7-3h4.58ZM7.28 12.21l.05-.21V6.5c0-.28-.22-.5-.5-.5-.55 0-1-.45-1-1s.45-1 1-1h.34l.18.64c.06.21.26.36.48.36h4c.22 0 .42-.15.48-.36l.18-.64h.34c.55 0 1 .45 1 1s-.45 1-1 1c-.28 0-.5.22-.5.5V12l.05.21 1.74 3.75c-2.72-.11-3.67.48-4.58 1.06-.9.56-1.83 1.15-4.96 1.02l2.7-5.83ZM17.7 26.33c-1.58 1.92-4.11 2.78-8.21 2.78s-6.63-.86-8.21-2.78c-.35-.44-.41-1.05-.17-1.56l2.79-6.15c.44.02.85.04 1.22.04 2.74 0 3.72-.63 4.6-1.19.89-.57 1.68-1.07 4.43-.88l3.72 8.18c.24.51.17 1.11-.17 1.55Z" />
</g>
</g>
</symbol>
</svg>@import url("https://fonts.googleapis.com/css2?family=Fondamento&display=swap");
:root {
--color-space-dark: #191d32;
--color-space-support: #351e29;
--color-space: #282f44;
--color-dark-liver: #453a49;
--color-liver: #634570;
--color-catawba: #6d3b47;
--color-catawba-light: #8c516c;
--color-lightest: #fafafa;
--orb-size: 110px;
--option-size: 80px;
--circle-size: 320px;
}
/* basic styling */
select {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-align-last: center; /* Safari fix */
border: 4px dashed var(--color-space);
width: var(--orb-size);
aspect-ratio: 1;
border-radius: 50%;
cursor: pointer;
font-family: "Fondamento", cursive;
box-shadow: inset 0 1px 1px #ccc, inset 0 -1px 1px #aaa, 0 2px 4px -3px #666;
transition: box-shadow 0.3s ease-out, color 0.3s ease-out;
color: var(--color-lightest);
/* Background images and padding used for when no customizable select support */
background: var(--color-dark-liver)
url("https://assets.codepen.io/159218/potion.svg") center 12px /
calc(var(--orb-size) / 4) no-repeat;
padding-block: calc(var(--orb-size) / 2) 15px;
&:is(:hover, :focus) {
background-color: var(--color-liver);
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
@supports (appearance: base-select) {
&,
&::picker(select) {
appearance: base-select;
}
}
}
@supports (appearance: base-select) {
select {
padding-block: 0;
background-image: none;
&::picker-icon {
display: none;
}
.icon {
width: calc(var(--option-size) * 0.375);
height: calc(var(--option-size) * 0.625);
transform: rotate(20deg);
transition: transform 0.15s;
}
}
::picker(select) {
--rotation-divide: calc(180deg / 2);
top: anchor(center);
left: anchor(center);
transform: translate(-50%, -50%);
overflow: visible;
transition: overlay 0.5s, display 0.5s;
transition-behavior: allow-discrete;
/* Removing some UA styles */
margin: 0;
padding: 0;
background: transparent;
border: none;
}
/* style options */
option {
--half-circle: calc(var(--circle-size) / -2);
--deg: var(--rotation-divide);
--negative: calc(var(--deg) / -1);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
width: var(--option-size);
aspect-ratio: 1;
margin: calc(var(--option-size) / -2);
background: var(--color-catawba);
border-radius: 50%;
opacity: 0;
box-shadow: inset 0 1px 1px #ccc, inset 0 -1px 1px #aaa, 0 2px 4px -3px #666;
transition: opacity 0.5s, box-shadow 0.3s, transform 0.5s;
cursor: grab;
&::checkmark {
display: none;
}
&:checked {
background: var(--color-catawba-light);
}
& span {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 1.1rem;
color: var(--color-lightest);
opacity: 0;
}
}
option:is(:hover, :focus) {
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
option:is(:hover, :focus, :checked) .icon {
transform: rotate(0);
}
/* Potion icon text (fades in with a delay) */
select:open option {
transform: rotate(var(--deg)) translate(var(--half-circle))
rotate(var(--negative));
opacity: 1;
& span {
animation: fade-in 0.4s ease-out forwards 0.4s;
}
@starting-style {
transform: none;
}
}
/* count circle placement */
.items:has(option:nth-child(2)) {
--rotation-divide: calc(360deg / 2);
}
.items:has(option:nth-child(3)) {
--rotation-divide: calc(360deg / 3);
}
.items:has(option:nth-child(4)) {
--rotation-divide: calc(360deg / 4);
}
.items:has(option:nth-child(5)) {
--rotation-divide: calc(360deg / 5);
}
.items:has(option:nth-child(6)) {
--rotation-divide: calc(360deg / 6);
}
option:nth-child(2) {
--deg: calc(var(--rotation-divide) * 2);
}
option:nth-child(3) {
--deg: calc(var(--rotation-divide) * 3);
}
option:nth-child(4) {
--deg: calc(var(--rotation-divide) * 4);
}
option:nth-child(5) {
--deg: calc(var(--rotation-divide) * 5);
}
option:nth-child(6) {
--deg: calc(var(--rotation-divide) * 6);
}
/* thats enough potions for you! */
option:nth-child(1n + 7) {
display: none;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
/* general styles */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 5vh 5vw;
font-family: "Fondamento", cursive;
background-image: radial-gradient(
circle,
var(--color-space-dark),
var(--color-space-support)
);
}
/* potion colors */
.icon-health {
--potion-color: red;
--support-color: darkred;
}
.icon-mana {
--potion-color: blue;
--support-color: darkblue;
}
.icon-stamina {
--potion-color: yellow;
--support-color: orange;
}
.icon-strength {
--potion-color: purple;
--support-color: indigo;
}
.icon-fortify {
--potion-color: lime;
--support-color: green;
}
.icon-frenzy {
--potion-color: hotpink;
--support-color: orchid;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.