England Football

Custom Input Select 

<div class="registration-custom-select registration-text-input-container">
    <label class="registration-text-input-container__label registration-custom-select__label" for="nationality">

    </label>
    <select name=nationality id=nationality>
        <option disabled selected value="select">Nationality</option>
        <option value="Pakistan">Saab</option>
        <option value="Srilanka">Mercedes</option>
        <option value="Nepal">Audi</option>
    </select>
    <div class="registration-error registration_hide" role="alert">
        <span class="registration-error-message registration_hide" id="invalid-b2c-contact-number">invalid-b2c-contact-number</span>
        <span class="registration-error-message registration_hide" id="invalid-input-required">Requird</span>
        <span class="registration-error-message registration_hide" id="invalid-input-length">invalid-length</span>
        <span class="registration-error-message registration_hide" id="invalid-input-alphabets-only">alphabets-only</span>
        <span class="registration-error-message registration_hide" id="invalid-input-alphanumeric">alpha numeric</span>
        <span class="registration-error-message registration_hide" id="invalid-input-underflow">A junior account cannot be 16 years old or above</span>
        <span class="registration-error-message registration_hide" id="invalid-input-overflow">A junior account cannot be 16 years old or above</span>
        <span class="registration-error-message registration_hide" id="invalid-character-length">length-should-be-9characters</span>
    </div>

</div>

No notes defined.

{
  "placeholder": "Nationality",
  "id": "nationality",
  "name": "nationality",
  "label": "Nationality"
}
  • Content: 
    .registration-custom-select {
  width: 100%;
  font-size: 16px;
  position: relative;

  &__label {
    line-height: 24px;
    font-size: 14px;
    font-family: $text-font;
    color: $light-blue;
  }

  &::after {
    position: absolute;
    content: '▼';
    right: 1rem;
    pointer-events: none;
    transform: translate(-110%, 25%);
    top: 35px;
  }

  select {
    appearance: none;
    height: 44px;

    /*  safari  */
    -webkit-appearance: none;
    width: 100%;
    font-size: 16px;
    padding: 0.675em 20px;
    background-color: $crest-blue;
    border: 1px solid white;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    font-family: $text-font;

    &:hover,
    &:focus-visible {
      outline: none;
      background-color: $rj-blue;
    }

    & option {
      color: $black;
      background-color: $white;

      &:hover {
        cursor: context-menu;
        color: initial;
        background-color: #004cff;
      }
      &:focus {
        outline: none;
        color: initial;
        background-color: #004cff;
      }
    }
  }
}

.registration-custom-select.error {
  select {
    border: 1px solid $Embarrassment-red;
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
}
  • URL: /components/raw/custom-input-select/custom-input-select.scss
  • Filesystem Path: src/library/components/custom-input-select/custom-input-select.scss
  • Size: 1.3 KB 
<div class="registration-custom-select registration-text-input-container">
    {{!-- add error class to make error visible --}}
    <label class="registration-text-input-container__label registration-custom-select__label" for="{{name}}">
      {{copy}}
    </label>
    <select
      {{#if name}}name={{name}} {{/if}}
      {{#if id}}id={{id}} {{/if}}
      {{#if ariaLabel}}aria-label={{ariaLabel}} {{/if}}
      >
      <option disabled selected value="select">{{placeholder}}</option>
      <option value="Pakistan">Saab</option>
      <option value="Srilanka">Mercedes</option>
      <option value="Nepal">Audi</option>
    </select>
    {{render '@registration-error'}}
  </div>