I'm working on a reactjs project (html + js + css available).

I have an HTML select object like this:

.box {
  width: 95%;
  padding: 5px 2px;
  border-radius: 5px;
  cursor: pointer;
}

<select class="box">
  <option value="1"><b>This text should be only visible inside box: </b>OPTION 1</option>
  <option value="2"><b>This text should be only visible inside box: </b>OPTION 2</option>
  <option value="3"><b>This text should be only visible inside box: </b>OPTION 3</option>
</select>

The objective is that the initial text (marked as: "This text should be only visible inside box: "), will only be on the box, but not in the dropdown menu. In the dropdown menu, should only appear three options: "OPTION 1", "OPTION 2" and "OPTION 3".

There is any way to do this? I don't want an static text outside the box, I want the text inside the box.

Clarify concepts:

• Mobile devices have to identify it as a select (a div with custom dropdown, probably won't work).
• The text has to be visible after selecting the option. Imagine if the text is: "Your option is: ". At the beginning, it will show the first option (default), and after selecting another option, it will continue to show the initial text plus the selected option.