diff --git a/resources/css/bem/input-container.less b/resources/css/bem/input-container.less
index 6cbf2e344a2..a05fdc0d5d2 100644
--- a/resources/css/bem/input-container.less
+++ b/resources/css/bem/input-container.less
@@ -2,26 +2,30 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .input-container {
+  --label-font-size: @font-size--normal;
+  --label-line-height: 1.25;
+  --label-height: calc(
+    var(--label-font-size) * var(--label-line-height) + var(--label-padding) * 2
+  );
   --label-colour: hsl(var(--hsl-c2));
-  --label-padding-base: 5px;
+  --label-padding: 5px;
+  --label-pointer-events: auto;
   --input-bg: hsl(var(--hsl-b6));
   --input-border-colour: var(--input-border-base-colour);
   --input-border-base-colour: transparent;
   --input-border-hover-colour: hsl(var(--hsl-l3));
   --input-border-focus-colour: hsl(var(--hsl-l1));
   --input-border-error-colour: hsl(var(--hsl-red-2));
-  --input-padding: var(--label-padding-base) var(--input-padding-base)
-    var(--input-padding-base);
+  --input-padding: var(--label-height) var(--input-padding-right)
+    var(--input-padding-base) var(--input-padding-base);
   --input-padding-base: 10px;
+  --input-padding-right: var(--input-padding-base);
 
-  display: flex;
-  flex-direction: column;
-  background-color: var(--input-bg);
-  border-radius: @border-radius-large;
+  display: grid;
   text-transform: initial;
   font-weight: initial;
   font-size: inherit;
-  box-shadow: inset 0 0 0 2px var(--input-border-colour);
+  position: relative;
 
   margin: 0;
   width: 100%;
@@ -53,8 +57,6 @@
   &--fill {
     flex: 1;
     min-height: 150px;
-    display: grid;
-    grid-template-rows: auto 1fr;
   }
 
   &--genre {
@@ -74,12 +76,37 @@
     --input-padding: 15px var(--input-padding-base);
   }
 
+  &--select {
+    --arrow-width: calc(var(--input-padding-base) * 2 + 1em);
+    --input-padding-right: var(--arrow-width);
+    --label-pointer-events: none;
+
+    &::after {
+      .fas();
+      .center-content();
+      content: @fa-var-chevron-down;
+      width: var(--arrow-width);
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      height: 100%;
+      pointer-events: none;
+    }
+  }
+
+  // Floats the label so the input can receive click event on the entire area.
+  // Mainly useful for select input to allow showing the dropdown when the
+  // label is clicked.
   &__label {
     display: flex;
     justify-content: space-between;
-    margin: 0;
     color: var(--label-colour);
-    font-size: @font-size--normal;
-    padding: var(--label-padding-base) var(--input-padding-base) 0;
+    font-size: var(--label-font-size);
+    line-height: var(--label-line-height);
+    margin: 0;
+    padding: var(--label-padding) var(--input-padding-base) 0;
+    position: absolute;
+    width: 100%;
+    pointer-events: var(--label-pointer-events);
   }
 }
diff --git a/resources/css/bem/input-text.less b/resources/css/bem/input-text.less
index bca6c8acd33..26555c9fd3d 100644
--- a/resources/css/bem/input-text.less
+++ b/resources/css/bem/input-text.less
@@ -4,8 +4,10 @@
 .input-text {
   .reset-input();
   color: hsl(var(--hsl-c1));
-  background: transparent;
+  background: var(--input-bg);
   resize: none;
   width: 100%;
   padding: var(--input-padding);
+  box-shadow: inset 0 0 0 2px var(--input-border-colour);
+  border-radius: @border-radius-large;
 }
diff --git a/resources/css/bem/store-text.less b/resources/css/bem/store-text.less
index fd8576715cf..47aaee78ab5 100644
--- a/resources/css/bem/store-text.less
+++ b/resources/css/bem/store-text.less
@@ -21,6 +21,11 @@
     color: @osu-colour-h1;
   }
 
+  &--options {
+    display: grid;
+    gap: 10px;
+  }
+
   &--price {
     color: @osu-colour-h1;
     font-weight: 600;
diff --git a/resources/lang/en/store.php b/resources/lang/en/store.php
index d8dbe247543..3237f3e7ae8 100644
--- a/resources/lang/en/store.php
+++ b/resources/lang/en/store.php
@@ -123,7 +123,7 @@
         ],
 
         'item' => [
-            'quantity' => 'Quantity',
+            'quantity' => 'quantity',
 
             'display_name' => [
                 'supporter_tag' => ':name for :username (:duration)',
diff --git a/resources/views/store/products/show.blade.php b/resources/views/store/products/show.blade.php
index 69d18fc90db..fd014012fda 100644
--- a/resources/views/store/products/show.blade.php
+++ b/resources/views/store/products/show.blade.php
@@ -67,18 +67,18 @@ class="
                             <p class="store-text store-text--price-note">excluding shipping fees</p>
                         @endif
 
-                        @if($product->types())
-                            @foreach($product->types() as $type => $values)
-                                @if (count($values) === 1)
-                                    {{-- magic property --}}
-                                    <input type="hidden" name="item[extra_data][{{ $type }}]" value="{{ array_keys($values)[0] }}" />
-                                @else
-                                    <div class="form-group">
-                                        <label class="u-uppercase" for="select-product-{{ $type }}">{{ $type }}</label>
+                        <div class="store-text store-text--options">
+                            @if ($product->types())
+                                @foreach ($product->types() as $type => $values)
+                                    @if (count($values) === 1)
+                                        {{-- magic property --}}
+                                        <input type="hidden" name="item[extra_data][{{ $type }}]" value="{{ array_keys($values)[0] }}" />
+                                    @else
+                                        <label class="input-container input-container--select input-container--store">
+                                            <div class="input-container__label">{{ $type }}</div>
 
-                                        <div class="form-select">
-                                            <select id="select-product-{{ $type }}" class="form-select__input js-url-selector" data-keep-scroll="1">
-                                                @foreach($values as $value => $product_id)
+                                            <select id="select-product-{{ $type }}" class="input-text js-url-selector" data-keep-scroll="1">
+                                                @foreach ($values as $value => $product_id)
                                                     <option
                                                         {{ $product_id === $product->product_id ? 'selected' : '' }}
                                                         value="{{ route('store.products.show', $product_id) }}"
@@ -87,22 +87,21 @@ class="
                                                     </option>
                                                 @endforeach
                                             </select>
-                                        </div>
-                                    </div>
-                                @endif
-                            @endforeach
-                        @endif
+                                        </label>
+                                    @endif
+                                @endforeach
+                            @endif
 
-                        @if($product->inStock())
-                            <div class='form-group'>
+                            @if ($product->inStock())
                                 <input type="hidden" name="item[product_id]" value="{{ $product->product_id }}" />
-                                <label for="item[quantity]" class="u-uppercase">
-                                    {{ osu_trans('store.order.item.quantity') }}
-                                </label>
 
-                                <div class="form-select">
+                                <label class="input-container input-container--select input-container--store">
+                                    <div class="input-container__label">
+                                        {{ osu_trans('store.order.item.quantity') }}
+                                    </div>
+
                                     <select
-                                        class="js-store-item-quantity form-select__input"
+                                        class="js-store-item-quantity input-text"
                                         name="item[quantity]"
                                     >
                                         @foreach (product_quantity_options($product) as $option)
@@ -111,13 +110,13 @@ class="js-store-item-quantity form-select__input"
                                             </option>
                                         @endforeach
                                     </select>
-                                </div>
-                            </div>
-                        @elseif ($product->inStock(1, true))
-                            {{ osu_trans('store.product.stock.out_with_alternative') }}
-                        @else
-                            {{ osu_trans('store.product.stock.out') }}
-                        @endif
+                                </label>
+                            @elseif ($product->inStock(1, true))
+                                {{ osu_trans('store.product.stock.out_with_alternative') }}
+                            @else
+                                {{ osu_trans('store.product.stock.out') }}
+                            @endif
+                        </div>
                     </div>
                 </div>
             @endif