<label for="date">Pick a date</label>
<div class="input-group">
  <input id="date" type="date" />
  <button commandfor="date" command="show-picker">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
    </svg>
    <span class="sr-only">Pick date</span>
  </button>
</div>

@import url("https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap");

/* Remove the default date calendar picker */
[type="date"] {
  &::-webkit-calendar-picker-indicator {
    display: none;
  }
}

/* Style the input group with invoker */
.input-group {
  display: flex;
  [type="date"] {
    font-family: "Reddit Mono", monospace;
    border-image: repeating-linear-gradient(
      to right in oklab,
      oklch(80% 0.4 222) 0%,
      oklch(35% 0.5 313) 100%
    );
    border-width: 0.35rem;
    border-image-slice: 1;
    background: #333;
    color: #fff;
    font-size: 2rem;
    padding: 1rem;
    accent-color: oklch(35% 0.5 313);
  }
  [commandfor] {
    cursor: pointer;
    color: #fff;
    background: oklch(35% 0.5 313);
    border: 0;
    padding: 0 1.2rem;
  }
}

.icon {
  width: 2.2rem;
  aspect-ratio: 1;
}

body {
  font-family: "Reddit Mono", monospace;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  font-size: 1.3rem;
  line-height: 1.6;
  min-block-size: 100dvb;
  display: flex;
  background: #474056;
  color: #fff;
}

label {
  font-family: "Reddit Mono", monospace;
}

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}