Put select option in input field-CodePudding

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;
}

<div >
  <input id="value" name="value" type="text"  aria-describedby="basic-addon1">
</div>

I have an input field like this:

<div >
  <input id="value" name="value" type="text"  aria-describedby="basic-addon1">
</div>

And I add a currency text on the right side of this input:

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;
}

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.

I have to use select option because I want to get this currency value when I submit form to save it in database.

Can you help me?

Thank you very much!

CodePudding user response：

Put your input and select tags in a container, remove the default styling from both, and then add a border (or outline if you prefer) to the container itself.

input {
  width: 80vw;
  outline: none;
  border: none;
}

select {
  width: 20vw;
  outline: none;
  border: none;
}

.inputContainer {
  display: flex;
  flex-direction: row;
  gap: 2px;
  border: 1px solid black;
}

<div >
  <input id="value" name="value" type="text"  aria-describedby="basic-addon1">
  <select>
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
  </select>
</div>