How to create an input field with integrated select element

In this guide we will show an example on how we can create an input field with integrated select component in React. I got the inspiration from our recently published open source project, our currency converter.

Final result

Implementation

So, let's begin with creating our wrapper.

<div className={style.inputContainer}></div>

And the styling will be as follows

.inputContainer {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  width: 300px;
}

And now, let's add our input and select. We will wrap our select element in a seperate div to place it at the end of our component.

<div className={style.inputContainer}>
  <input className={style.input} type="text" />
  <div className={style.selectContainer}>
    <select className={style.select}>
      <option>Label 1</option>
      <option>Label 2</option>
    </select>
  </div>
</div>

And styling will be as follows

.input {
  border: none;
  width: 100%;
  font-size: 14px;
  padding: 4px 8px;
  outline: none;
  color: #5f6368;
  background-color: transparent;
}

.selectContainer {
  display: flex;
  align-items: center;
  flex: 0;
  width: 100%;

  .select {
    border: none;
    outline: none;
    color: #5f6368;
    font-size: 12px;
    padding: 4px 18px 4px 24px;
    border-left: 1px solid #ddd;
    background-color: transparent;
  }
}

Note that we are setting outline: none;. It will look weird with the highlight border when we have the input and select inside of our container which already has a border.

Safari...

All right, now it all looks great. Unless you are using Safari browser and the result looks like this...

Not so pretty, right? Let's fix this.

Fix Safari styling

All right, let's fix this issue. In our styling, let's add two more properties in our .select class.

.select {
  border: none;
  outline: none;
  color: #5f6368;
  font-size: 12px;
  padding: 4px 18px 4px 24px;
  border-left: 1px solid #ddd;

  -webkit-appearance: none;
  appearance: none;
}

All right, that'll fix it.

However, now our arrow disappeared... Let's fix that as well.

Add our arrow

We will add an icon ourselves to our component. You can find the icon here.

Add <img /> to select container

Let's add our arrow icon to the component

<div className={style.inputContainer}>
  <input className={style.input} type="text" />
  <div className={style.selectContainer}>
    <select className={style.select}>
      <option>Label 1</option>
      <option>Label 2</option>
    </select>
    <img className="expandIcon" alt="icon" src={expandIcon} />
  </div>
</div>

And in our stylescheet, we add this class.

.expandIcon {
  position: absolute;
  right: 8px;
  height: 18px;
  width: 18px;
}

Full stylesheet

.inputContainer {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  width: 300px;

  .input {
    border: none;
    width: 100%;
    font-size: 14px;
    padding: 4px 8px;
    outline: none;
    color: #5f6368;
    background-color: transparent;
  }

  .selectContainer {
    display: flex;
    flex: 0;
    width: 100%;

    .select {
      border: none;
      outline: none;
      color: #5f6368;
      font-size: 12px;
      padding: 4px 18px 4px 24px;
      border-left: 1px solid #ddd;
      background-color: transparent;
      -webkit-appearance: none;
      appearance: none;
    }

    .chevron {
      position: absolute;
      right: 8px;
      height: 18px;
      width: 18px;
    }
  }
}

Outro

That's it. Now we have created our input with an integrated select, with cross browser support. I hope you liked this guide, and hope to see you in more of our articles.

Have a great day!