How to remove the first empty option on contact form 7

user_11022213 0
Viewed 285

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.

enter image description here

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:

enter image description here

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:

enter image description here

So, what I need:

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

contact-form-7 wordpress css html
3 Answers

Inspect the element in your browser, in this case the tag can be an <option> </option> that is empty or any other tag that the plugin has generated to create the items. So once the element is inspected, you can get its class or id attribute, then write some css; .class {display: none}, this will hide that empty item.

If its class or id attribute is equal to the others, the display: none will hide all. To resolve this behavior, you can use select + .class { display: none; } Regardless of this example, select represents the parent of the class or id attribute that you find in your browser. So this piece of code says to find the first "option" (in your case it will be your class), which is inside the select tag

user_127117650

You can hide all empty options in your select:

option:empty {
    display: none;
}

Alternatively, if it's only the first option you'd like to hide:

option:first-child {
    display: none;
}
user_115803500

This should work, it will hide every option that is empty.

select.kyc-form option:empty
{
    display:none;
}
user_42174520
Related