How to set a label in between the select value and the arrow (ion-select) React

Hi, i am trying to get a permanent label in the ion select that remains there after making the selection and it has to be between the option i selected and the arrow, in this case the Kgs and grs. Not sure how to do that or if it is possible. Picture for reference
Screen Shot 2022-02-12 at 1.02.09 PM
And this is what i have at the moment

i think you can use something like:

  • main container (in position: relative)
  • a ion-label item in position: absolute
  • ion-item with a ion-select inside

  <div class="main-container">
        A LABEL


the css could be:

.select-icon {
position: absolute;
right: 50%;
.select-text {
position: absolute;
left: 0;

ion-label {

position: absolute;
left: 20%;

.main-container {
position: relative;
1 Like