<div class="search">
    <input type="search" name="search-field" id="search-field" class="search-field">
    <button class="search-submit"><span class="fa-solid fa-magnifying-glass"></span></button>
</div>
  • Content:
    body {
      font-family: 'Helvetica Neue';
      font-size: 18px;
    }
    *, *::before, *::after {
      box-sizing: border-box;
    }
    
    label {
      color: var(--gray-800);
      font-size: 16px;
      margin-bottom: .25em;
    }
    
    input {
      font-family: inherit;
      border-radius: 6px;
      border: 1px solid var(--text-color);
      padding: .33em;
      color: var(--text-color);
      font-size: 18px;
      margin-bottom: .33em;
    }
    
    input:hover {
      border-color: var(--gray-800);
    }
    
    input:active, input:focus, input:focus-visible {
      border-color: var(--purple-800-brand);
      outline: none;
    }
    
    input:disabled {
      border: none;
      background-color: var(--disabled-color);
      opacity: 75%;
    }
    
    .input-icon {
      position: relative;
      margin-bottom: .33em;
    }
    
    .input-icon[data-error] input {
      border-color: var(--error-color);
      margin-bottom: 0;
    }
    
    .input-icon[data-error]::after {
      content: attr(data-error);
      color: var(--error-color);
      font-size: 14px;
      display: block;
      /* padding: .25em 0; */
    }
    
    .input-icon > span {
      position: absolute;
      left: 6px;
      top: 2.15em;
    }
    
    input[type="email"] {
      padding-left: 1.35em;
    }
    
    .icon {
      font-size: .85em;
      color: var(--text-color);
    }
    
    .input-hint {
      margin-bottom: .33em;
    }
    
    .input-hint[data-hint] input {
      margin-bottom: 0;
    }
    
    .input-hint[data-hint]::after {
      content: attr(data-hint);
      color: var(--gray-600);
      font-size: 14px;
      display: block;
    }
    
    .search {
      position: relative;
    }
    
    .search-field {
      position: relative;
      z-index: 2;
    }
    
    
    .search-submit {
      position: static;
        top: 0;
        bottom: 0;
      color: var(--text-color);
      background: none;
      /* border-top: 1px solid var(--gray-700-brand);
      border-right: 1px solid var(--gray-700-brand);
      border-bottom: 1px solid var(--gray-700-brand);
      border-left: none;
      border-bottom-right-radius: 6px;
      border-top-right-radius: 6px; */
      border: 1px solid var(--text-color);
      border-radius: 6px;
      font-size: 18px;
      height: 35.475px;
      padding: .385em .33em .385em .95em;
      margin: 0 0 0 -20px;
      z-index: 1;
    }
    
    .search-submit:hover {
      border-color: var(--gray-800);
      background-color: var(--gray-100);
      color: var(--gray-800);
    }
    
    .search-submit:active {
      border-color: var(--purple-800-brand);
    }
    
    
  • URL: /components/raw/inputs/inputs.css
  • Filesystem Path: components/02-components/inputs/inputs.css
  • Size: 2.2 KB

Usage Guidelines

  • Use text fields in forms to help people enter or search for text
  • Include help text if needed
  • When necessary, label the input as “Optional”