Icon in front of a select

Topic: Icon in front of a select

Richard free asked 5 years ago

Hi,

I was wondering if it's possible to put an icon in front of a select like

  <div class="md-form">
    <i class="fas fa-envelope prefix white-text active"></i>
    <input type="email" id="form2" class="white-text form-control">
    <label for="form2" class="active">Adresse email</label>
  </div>

  <select class="mdb-select md-form">
    <i class="fas fa-venus-mars prefix white-text"></i>
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Homme</option>
    <option value="2">Femme</option>
  </select>
  <label class="mdb-main-label white-text">Genre</label>

Thanks!

Add comment

y2k_eclipse free answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

  <div class="col-md-11">
    <!-- Material input -->
    <select class="mdb-select md-form colorful-select dropdown-primary">
      <option value="1">Titular</option>
      <option value="2">Conyuge</option>
      <option value="3">Hija</option>
      <option value="4">Hijo</option>
      <option value="5">Madre</option>
    </select>
    <label class="mdb-main-label">Condición</label>
  </div>
</div>

Marcin Luczak staff commented 4 years ago

Hello y2k_eclipse,

Please tell me how can I help you. Does this chunk of code does not work for you? Have you initialized material select with $('.mdb-select').materialSelect(); ?

Please see my snippet:https://mdbootstrap.com/snippets/jquery/marcin-luczak/2625138

Regards, Marcin

Add comment

Mikołaj Smoleński staff answered 5 years ago