<form class="input-group vd-search-form" action="#" role="search">
    <label class="sr-only" for="search-form" id="search-form-label">Champ de recherche</label>
    <input id="search-form" type="text" class="form-control" placeholder="Rechercher" aria-describedby="search-form-label">
    <span class="input-group-btn">
        <button class="btn" type="submit" aria-label="Rechercher">
            <i class="fas fa-search" aria-hidden="true"></i>
        </button>
    </span>
</form>
<form class="input-group vd-search-form{% if styleModifier %} {{ styleModifier }}{% endif %}" action="#" role="search">
  <label class="sr-only" for="search-form" id="search-form-label">
  {%- if label -%}
    {{ label }}
  {%- else -%}
    Champ de recherche
  {%- endif -%}
  </label>
  <input id="search-form"
         type="text"
         class="form-control"
         {%- if placeholder %} placeholder="{{ placeholder }}" {% endif -%}
         {%- if pattern %} pattern="{{ pattern }}" {% endif -%}
         aria-describedby="search-form-label">
  <span class="input-group-btn">
    <button class="btn" type="submit" aria-label="Rechercher">
      <i class="fas fa-search" aria-hidden="true"></i>
    </button>
  </span>
</form>
{
  "heading": {
    "text": "Rechercher dans les actualités",
    "level": "h4"
  },
  "placeholder": "Rechercher",
  "options": {
    "id": "fieldset",
    "legend": "Legend",
    "items": [
      {
        "label": "Cras sed ligula eu est cursus eleifend ut id turpis",
        "name": "example",
        "id": "exampleOption1",
        "checked": true
      },
      {
        "label": "Fusce feugiat quam vel tellus malesuada, sit amet maximus justo hendrerit",
        "name": "example",
        "id": "exampleOption2"
      },
      {
        "label": "Aenean id est non dui porttitor euismod",
        "name": "example",
        "id": "exampleOption3"
      },
      {
        "label": "Phasellus dignissim metus quis blandit varius",
        "name": "example",
        "id": "exampleOption4",
        "disabled": true
      }
    ],
    "type": "checkbox"
  },
  "label": "Champ de recherche"
}
  • Content:
    @charset 'UTF-8';
    
    /**
     * regular search form
     *
     * 1. fix padding problem with padding group button http://d.pr/i/ObEPO8
     *    see also CCWEB-9943
     */
    .vd-search-form-regular {
      ::placeholder {
        font-style: italic;
      }
    
      > .form-control {
        margin-left: 0 !important;
      }
    
      .btn {
        background: $vd-primary-dark;
        border-color: $vd-primary-dark;
        color: $white;
    
        &,
        .svg-inline--fa {
          color: $white;
        }
    
        &:hover {
          background: shade-color($vd-primary, 10%);
          border-color: shade-color($vd-primary, 10%);
        }
      }
    
      .input-group-btn > .btn {
        height: 2.375rem;
      }
    
      @media print {
        display: none;
      }
    }
    
    .vd-search-form {
      display: flex;
      border-top: 4px solid $black;
      border-bottom: 4px solid $black;
      margin-bottom: $spacer;
    
      .form-control {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0;
        border-color: transparent;
        transition:
          padding 0.11s ease-in,
          border 0.11s;
    
        &:focus {
          padding-left: $input-btn-padding-y;
          border: 2px solid $vd-focus;
          box-shadow: none;
        }
      }
    
      .input-group-btn {
        width: auto;
      }
    
      .input-group-btn > .btn {
        padding: 0.365rem 0.8rem;
        background: $vd-primary-dark;
    
        &,
        .svg-inline--fa {
          color: $white;
        }
    
        &:hover {
          background: shade-color($vd-primary, 10%);
        }
      }
    
      ::placeholder {
        font-style: italic;
      }
    
      @media print {
        display: none;
      }
    }
    
  • URL: /components/raw/search-form/_search-form.scss
  • Filesystem Path: src/components/01-atoms/search-form/_search-form.scss
  • Size: 1.4 KB

The main search form, the one we use in the header. .vd-search-form.

The regular variant is used in other parts of the website. .vd-search-form-regular