diff --git a/resources/css/bem/artist-track-search-form.less b/resources/css/bem/artist-track-search-form.less
index 4c8c52e5677..e176e999d43 100644
--- a/resources/css/bem/artist-track-search-form.less
+++ b/resources/css/bem/artist-track-search-form.less
@@ -2,9 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .artist-track-search-form {
-  --input-bg: hsl(var(--hsl-b5));
-  --input-border-radius: @border-radius--large;
-  background: hsl(var(--hsl-b4));
+  background-color: hsl(var(--hsl-b4));
 
   &__advanced {
     display: grid;
@@ -16,16 +14,6 @@
     }
   }
 
-  &__big-input {
-    .reset-input();
-    background: var(--input-bg);
-    border-radius: var(--input-border-radius);
-    height: 50px;
-    width: 100%;
-    font-size: @font-size--title-small-4;
-    padding: 10px;
-  }
-
   &__content {
     --vertical-gutter: 20px;
     .default-gutter-v2();
@@ -40,70 +28,4 @@
       gap: 5px;
     }
   }
-
-  &__genre-link {
-    .link-plain();
-    font-size: @font-size--normal;
-    font-weight: bold;
-    background: hsl(var(--hsl-b3));
-    color: hsl(var(--hsl-c1));
-    padding: 2px 15px 3px; // slightly more on the bottom to compensate font vertical alignment
-    border-radius: 10000px;
-    transition: none;
-    text-align: center;
-    white-space: nowrap;
-
-    &:focus,
-    &:active {
-      color: hsl(var(--hsl-c1));
-    }
-
-    &:hover {
-      background: hsl(var(--hsl-l1));
-      color: hsl(var(--hsl-b6));
-    }
-
-    &--active {
-      background: hsl(var(--hsl-b1));
-    }
-  }
-
-  &__genres {
-    display: grid;
-    gap: 5px;
-    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
-  }
-
-  &__input-group {
-    --label-colour: hsl(var(--hsl-c2));
-    background: var(--input-bg);
-    border-radius: var(--input-border-radius);
-    text-transform: initial;
-    padding: 5px 10px 10px;
-    font-weight: initial;
-    margin: 0;
-
-    &--2 {
-      grid-column-end: span 2;
-    }
-
-    &--4 {
-      grid-column-end: span 2;
-
-      @media @desktop {
-        grid-column-end: span 4;
-      }
-    }
-
-    &--genre {
-      --label-colour: hsl(var(--hsl-c1));
-      background: none;
-    }
-  }
-
-  &__label {
-    color: var(--label-colour);
-    font-size: @font-size--normal;
-    padding-bottom: 5px;
-  }
 }
diff --git a/resources/css/bem/input-container.less b/resources/css/bem/input-container.less
index 3523ba64baa..6cbf2e344a2 100644
--- a/resources/css/bem/input-container.less
+++ b/resources/css/bem/input-container.less
@@ -3,20 +3,37 @@
 
 .input-container {
   --label-colour: hsl(var(--hsl-c2));
-  --input-bg: hsl(var(--hsl-b5));
+  --label-padding-base: 5px;
+  --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-base: 10px;
 
   display: flex;
   flex-direction: column;
-  background: var(--input-bg);
-  border-radius: 5px;
+  background-color: var(--input-bg);
+  border-radius: @border-radius-large;
   text-transform: initial;
   font-weight: initial;
   font-size: inherit;
+  box-shadow: inset 0 0 0 2px var(--input-border-colour);
 
   margin: 0;
-  padding: 5px 10px 10px;
   width: 100%;
 
+  &:focus-within {
+    --input-border-colour: var(--input-border-focus-colour);
+  }
+
+  &:hover {
+    --input-border-colour: var(--input-border-hover-colour);
+  }
+
   &--2 {
     grid-column-end: span 2;
   }
@@ -29,16 +46,8 @@
     }
   }
 
-  &--chat {
-    --input-bg: hsl(var(--hsl-b6));
-
-    border: 2px solid transparent;
-    padding: 5px;
-    font-size: var(--input-size);
-  }
-
   &--error {
-    border-color: hsl(var(--hsl-red-2)) !important;
+    --input-border-colour: var(--input-border-error-colour);
   }
 
   &--fill {
@@ -50,26 +59,27 @@
 
   &--genre {
     --label-colour: hsl(var(--hsl-c1));
-    background: none;
+    --input-bg: transparent;
+    --input-border-hover-colour: transparent;
+    --input-border-focus-colour: transparent;
+    --input-border-error-colour: transparent;
   }
 
   &--judging {
-    --input-bg: hsl(var(--hsl-b3));
-
-    border: 2px solid transparent;
-    padding: 5px;
     margin: 20px 0;
+  }
 
-    &:focus-within {
-      border-color: hsl(var(--hsl-l1));
-    }
+  &--search-box {
+    font-size: @font-size--title-small-4;
+    --input-padding: 15px var(--input-padding-base);
   }
 
   &__label {
     display: flex;
     justify-content: space-between;
-    margin-bottom: 5px;
+    margin: 0;
     color: var(--label-colour);
     font-size: @font-size--normal;
+    padding: var(--label-padding-base) var(--input-padding-base) 0;
   }
 }
diff --git a/resources/css/bem/input-text.less b/resources/css/bem/input-text.less
index a1544b2cd42..bca6c8acd33 100644
--- a/resources/css/bem/input-text.less
+++ b/resources/css/bem/input-text.less
@@ -7,4 +7,5 @@
   background: transparent;
   resize: none;
   width: 100%;
+  padding: var(--input-padding);
 }
diff --git a/resources/js/artist-tracks-index/search-form.tsx b/resources/js/artist-tracks-index/search-form.tsx
index 7e0fcf5c388..3fb7bed7e8f 100644
--- a/resources/js/artist-tracks-index/search-form.tsx
+++ b/resources/js/artist-tracks-index/search-form.tsx
@@ -97,13 +97,15 @@ export default class SearchForm extends React.Component<Props> {
       <form className='artist-track-search-form' onSubmit={this.handleSubmit}>
         <input className='u-invisible' type='submit' />
         <div className='artist-track-search-form__content'>
-          <input
-            className='artist-track-search-form__big-input'
-            name='query'
-            onChange={this.handleChangeString}
-            placeholder={trans('beatmaps.listing.search.prompt')}
-            value={this.params.query ?? ''}
-          />
+          <div className='input-container input-container--search-box'>
+            <input
+              className='input-text'
+              name='query'
+              onChange={this.handleChangeString}
+              placeholder={trans('beatmaps.listing.search.prompt')}
+              value={this.params.query ?? ''}
+            />
+          </div>
 
           <h3 className='title title--artist-track-search-advanced'>
             {trans('artist.tracks.index.form.advanced')}
@@ -174,27 +176,31 @@ export default class SearchForm extends React.Component<Props> {
             </InputContainer>
 
             <InputContainer labelKey='artist.tracks.index.form.genre' modifiers={['4', 'genre']}>
-              <div className='artist-track-search-form-switches'>
-                {this.renderGenreLink(trans('artist.tracks.index.form.genre_all'), null)}
-                {this.props.availableGenres.map((genre) => this.renderGenreLink(genre, genre))}
+              <div className='input-text'>
+                <div className='artist-track-search-form-switches'>
+                  {this.renderGenreLink(trans('artist.tracks.index.form.genre_all'), null)}
+                  {this.props.availableGenres.map((genre) => this.renderGenreLink(genre, genre))}
+                </div>
               </div>
             </InputContainer>
 
             <InputContainer labelKey='artist.tracks.index.form.exclusive_only' modifiers={['4', 'genre']}>
-              <div className='artist-track-search-form-switches'>
-                {([['all', false], ['exclusive_only', true]] as const).map(([label, value]) => (
-                  <a
-                    key={label}
-                    className={classWithModifiers('artist-track-search-form-switches__link', {
-                      active: this.params.exclusive_only === value,
-                    })}
-                    data-value={value}
-                    href={makeLink({ ...this.params, exclusive_only: value })}
-                    onClick={this.handleExclusiveOnlyLinkClick}
-                  >
-                    {trans(`artist.tracks.index.exclusive_only.${label}`)}
-                  </a>
-                ))}
+              <div className='input-text'>
+                <div className='artist-track-search-form-switches'>
+                  {([['all', false], ['exclusive_only', true]] as const).map(([label, value]) => (
+                    <a
+                      key={label}
+                      className={classWithModifiers('artist-track-search-form-switches__link', {
+                        active: this.params.exclusive_only === value,
+                      })}
+                      data-value={value}
+                      href={makeLink({ ...this.params, exclusive_only: value })}
+                      onClick={this.handleExclusiveOnlyLinkClick}
+                    >
+                      {trans(`artist.tracks.index.exclusive_only.${label}`)}
+                    </a>
+                  ))}
+                </div>
               </div>
             </InputContainer>
           </div>
diff --git a/resources/js/chat/create-announcement.tsx b/resources/js/chat/create-announcement.tsx
index f9fb53dae3a..78281488ee2 100644
--- a/resources/js/chat/create-announcement.tsx
+++ b/resources/js/chat/create-announcement.tsx
@@ -63,7 +63,6 @@ export default class CreateAnnouncement extends React.Component<Props> {
           </InputContainer>
           <InputContainer
             labelKey='chat.form.labels.description'
-            modifiers='chat'
             {...this.model.inputContainerPropsFor('description')}
           >
             <input
@@ -77,25 +76,26 @@ export default class CreateAnnouncement extends React.Component<Props> {
           <InputContainer
             for='chat-form-users'
             labelKey='chat.form.labels.users'
-            modifiers='chat'
             {...this.model.inputContainerPropsFor('users')}
           >
-            <div className='chat-form-users'>
-              <UserCardBrick user={core.currentUserOrFail} />
-              <UsernameInput
-                id='chat-form-users'
-                ignoreCurrentUser
-                name='users'
-                onBlur={this.handleBlur}
-                onValidUsersChanged={this.handleValidUsersChanged}
-                onValueChanged={this.handleUsernameInputValueChanged}
-                {...this.usernameInputInitialProps}
-              />
+            <div className='input-text'>
+              <div className='chat-form-users'>
+                <UserCardBrick user={core.currentUserOrFail} />
+                <UsernameInput
+                  id='chat-form-users'
+                  ignoreCurrentUser
+                  name='users'
+                  onBlur={this.handleBlur}
+                  onValidUsersChanged={this.handleValidUsersChanged}
+                  onValueChanged={this.handleUsernameInputValueChanged}
+                  {...this.usernameInputInitialProps}
+                />
+              </div>
             </div>
           </InputContainer>
           <InputContainer
             labelKey='chat.form.labels.message'
-            modifiers={['chat', 'fill']}
+            modifiers='fill'
             {...this.model.inputContainerPropsFor('message')}
           >
             <textarea