JSFiddle - React, Tailwind, and code Playground
HTML
<div class="select_main">
<p></p>
<select>
<option>Значение</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
CSS
.select_main{
width: 140px;
height: 18px;
margin: 0px 5px;
position:relative;
color:black;
display: inline-block;
border: 1px solid #C8B5A1;
font-size:13px;
}
select {
width: 140px;
/* height: 20px; */
position:relative;
border:none;
cursor: default;
color:black;
}
.select_main p {
height:100%;
position:absolute;
top: 0px;
color:#0a0a0a;
line-height: 18px;
overflow:hidden;
}
JavaScript
$('select').each(function(){
$(this).siblings('p').text( $(this).children('option:selected').text() );
});
$('select').change(function(){
$(this).siblings('p').text( $(this).children('option:selected').text() );
});