title: input field css changed when using typeahead.js
body: <p>I'm trying to create simple entrance page like this <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/" rel="nofollow noreferrer">bootstrap4 example</a>.</p>
  
  <p>I copied the entire <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/floating-labels.css" rel="nofollow noreferrer">css file</a> from the example above (and the html source as well).</p>
  
  <p>Now I'm trying to combine it with typeahead: I want to replace the email input field with "Country Name" using typeahead as explained <a href="http://twitter.github.io/typeahead.js/examples/#the-basics" rel="nofollow noreferrer">here</a>.
  I want my input fields to look like:
  <a href="https://i.stack.imgur.com/5iplr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5iplr.jpg" alt="enter image description here"></a></p>
  
  <p>But the typeahead makes it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/6RFkg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6RFkg.jpg" alt="enter image description here"></a></p>
  
  <p>here is my <a href="https://jsfiddle.net/ItayB/v03Lh6L9/4/" rel="nofollow noreferrer">Fiddle</a>.</p>
  
  <p><strong>HTML:</strong><br>
      
        
          
          Floating labels&lt;/h1>-->
        </p>
  
  <pre><code>  &lt;div class="form-label-group"&gt;
      &lt;input type="text" id="cName" class="form-control" placeholder="Country Name" required autofocus&gt;
      &lt;label for="cName"&gt;Country Name&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="options-menu form-label-group"&gt;&lt;/div&gt;
    &lt;div class="form-label-group"&gt;
      &lt;select class="custom-select custom-select-lg" style="font-size: 100%;"&gt;
        &lt;option selected&gt;Pick one&lt;/option&gt;
        &lt;option value="1"&gt;Strategy 1&lt;/option&gt;
        &lt;option value="2"&gt;Strategy 2&lt;/option&gt;
        &lt;option value="3"&gt;Strategy 3&lt;/option&gt;
        &lt;option value="3"&gt;Strategy 4&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
    &lt;div class="checkbox mb-3"&gt;
      &lt;label&gt;
        &lt;input type="checkbox" value="remember-me"&gt; Remember me
      &lt;/label&gt;
    &lt;/div&gt;
    &lt;button class="btn btn-lg btn-primary btn-block" type="submit"&gt;Next&lt;/button&gt;
    &lt;p class="mt-5 mb-3 text-muted text-center"&gt;&amp;copy; 2018 R&amp;D&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    :root {
      --input-padding-x: .75rem;
      --input-padding-y: .75rem;
  }
  
  html,
  body {
      height: 100%;
  }
  
  body {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-align: center;
      -ms-flex-pack: center;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      padding-top: 40px;
      padding-bottom: 40px;
      background-color: #f5f5f5;
  }
  
  .form-signin {
      width: 100%;
      max-width: 420px;
      padding: 15px;
      margin: 0 auto;
  }
  
  .form-label-group {
      position: relative;
      margin-bottom: 1rem;
  }
  
  .form-label-group &gt; input,
  .form-label-group &gt; label {
      padding: var(--input-padding-y) var(--input-padding-x);
  }
  
  .form-label-group &gt; label {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      margin-bottom: 0; /* Override default `&lt;label&gt;` margin */
      line-height: 1.5;
      color: #495057;
      border: 1px solid transparent;
      border-radius: .25rem;
      transition: all .1s ease-in-out;
  }
  
  .form-label-group input::-webkit-input-placeholder {
      color: transparent;
  }
  
  .form-label-group input:-ms-input-placeholder {
      color: transparent;
  }
  
  .form-label-group input::-ms-input-placeholder {
      color: transparent;
  }
  
  .form-label-group input::-moz-placeholder {
      color: transparent;
  }
  
  .form-label-group input::placeholder {
      color: transparent;
  }
  
  .form-label-group input:not(:placeholder-shown) {
      padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
      padding-bottom: calc(var(--input-padding-y) / 3);
  }
  
  .form-label-group input:not(:placeholder-shown) ~ label {
      padding-top: calc(var(--input-padding-y) / 3);
      padding-bottom: calc(var(--input-padding-y) / 3);
      font-size: 12px;
      color: #777;
  }
  </code></pre>