如何在选项下拉字段上添加占位符

Question

im trying to put a placeholder that cannot be selected as a option on a dropdown field. Ive tried adding placeholder="" to the option tag but its not functioning- i tried adding "selected="selected" to the option too but i only see Im looking For as the option on the drop down. Id like that to be the placeholder so i can switch that to "any".

Anyone have any idea how to do this?

 <?php 
   $array = OSF_Custom_Post_Type_Portfolio::getInstance()->get_all_meta_field_value();
 ?>

 <div class="search-project">
                <form action="<?php echo get_post_type_archive_link('osf_portfolio'); ?>" method="get">
                    <div class="d-flex justify-content-center project-group">
                  
                        <div class="project-inner">
                       <select name="osf_portfolio_type">
                                <option value="" selected="selected"><?php echo esc_html__('Im Looking For', 'rehomes'); ?></option>
                                <?php
                                foreach ($array['osf_portfolio_type'] as $item) {
                                    ?>
                                    <option value="<?php echo esc_attr($item); ?>" <?php echo esc_attr($item == $_GET['osf_portfolio_type'] ? 'selected' : ''); ?>><?php echo esc_html($item); ?></option>
                                    <?php
                                }
                                ?>
                            </select>
                        </div>
                        <div class="project-inner">
              <select name="osf_portfolio_location">
                                <option value=""><?php echo esc_html__('Location', 'rehomes'); ?></option>
                                <?php
                                foreach ($array['osf_portfolio_location'] as $item) {
                                    ?>
                                    <option value="<?php echo esc_attr($item); ?>" <?php echo esc_attr($item == $_GET['osf_portfolio_location'] ? 'selected' : ''); ?>><?php echo esc_html($item); ?></option>
                                    <?php
                                }
                                ?>
                            </select>
                        </div>
             
                        <div class="project-inner align-self-end">
                            <button type="submit" class="btn btn-primary btn-block" style="color:white;background-color: black;">
                                Search
                            </button>
                        </div>
                    </div>
                </form>
            </div>

Answer 1

The HTML placeholder attribute specifies a short hint that describes the expected value and only can be used in input tags and textarea. There is no way to put a placeholder inside an option tag. You could create an additional option tag with no value and always selected as a reference just like a placeholder. For more info about placeholders please check https://www.w3schools.com/tags/att_placeholder.asp

 <div class="search-project">
    <form action="" method="get">
        <div class="d-flex justify-content-center project-group">
            <div class="project-inner">
                <select name="osf_portfolio_type">
                    <option value="" selected="selected">Red</option>
                    <option value="">Blue</option>
                </select>
            </div>
            <div class="project-inner">
                <select name="osf_portfolio_location">
                    <option value="">White</option>
                    <option value="">Black</option>
                </select>
            </div>
            <div class="project-inner align-self-end">
                <button type="submit" class="btn btn-primary btn-block" style="color:white;background-color: black;">
                    Search
                </button>
            </div>
       </div>
   </form>
</div>

Answer 2

There is a way to put what looks like a placeholder. Thanks to selected it appears as default, thanks to disabled it can't be selected as option, as value to be sent.

 <h1>fake placeholder in a select</h1> <select> <option selected disabled>fake placeholder</option> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> </select>