Custom design help in contact form 7

I am using contact form 7 and my code looks like this:

<div class="row">
   <div class="col-sm-9 col-lg-10 contact-form_kyc">
      <div class="form-row">
         <div class="col-sm-6 input-placeholder">
            [select hear class:kyc-form class:custom-select class:mb-3 first_as_label "" "Facebook" "Google" "Instagram" "LinkedIn" "Flyer" "Referral" "Radio" "Billboard" "Newspaper"]
            <div class="placeholder">
               How Did You Hear About Us <span>*</span>
            </div>
            <div class="placeholder-dropdown">
               <i class="fa fa-angle-down" aria-hidden="true"></i>
            </div>
         </div>
      </div>
   </div>
</div>

and this one is css:

.input-placeholder .placeholder span {
    color: red;
}
.input-placeholder select:focus{
    border-color: #ffffff;
}
.kyc-page-content .input-placeholder select:focus{
    border-color: #000000;
}
.input-placeholder select:after{
    font-family: "FontAwesome";
    content: "\f107";
    vertical-align: inherit;
}
.input-placeholder .placeholder-dropdown{
    color: #ccc;
    position: absolute;
    top: 0;
    right: 6px;
}

Here, you can see I have used placeholder div to fake it as a placeholder because I couldn’t make that * appears red on default placeholder.

Now, with above code, the design looks perfectly fine and as expected.

https://ibb.co/V3bZww7

As you can see in image: there is a placeholder with red asterisk and a angle down icon on right.

Now, when I open the dropdown, it appears as:

https://ibb.co/R4dnnKN

The first label is empty. I want to get rid of it.

So, to get rid of it I removed first_label_as "" but with this it looks like:

https://ibb.co/nfX0XqX

So, what I need:

I want the design like shown in first image but don’t want to show first empty options on dropdown.