title: Put select option in input field
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    width: 100%;
  }
  
  .input-currency:after {
    position: absolute;
    right: 0;
    top: 10px;
    content: 'USD';
    border-left: 1px solid black;
    padding: 0 7px;
    padding-right: 4em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="input-currency"&gt;
    &lt;input id="value" name="value" type="text" class="form-control m-input class" aria-describedby="basic-addon1"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I have an input field like this:</p>
  <pre><code>&lt;div class=&quot;input-currency&quot;&gt;
    &lt;input id=&quot;value&quot; name=&quot;value&quot; type=&quot;text&quot; class=&quot;form-control m-input class&quot; aria-describedby=&quot;basic-addon1&quot;&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And I add a currency text on the right side of this input:</p>
  <pre><code>input {
    width: 100%;
  }
  
  .input-currency:after {
    position: absolute;
    right: 0;
    top: 10px;
    content: 'USD';
    border-left: 1px solid black;
    padding: 0 7px;
    padding-right: 4em;
  }
  </code></pre>
  <p>Now I want to add a select option for other currency text on the right side of my input, when I click on 'USD' text, it will show other option like 'EUR',... but the layout css will be same like my old css, a vertical line and text, nothing else.</p>
  <p>I have to use select option because I want to get this currency value when I submit form to save it in database.</p>
  <p>Can you help me?</p>
  <p>Thank you very much!</p>