HTML – How to make a placeholder for a ‘select’ box

Placeholder :

• The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
• The short hint is displayed in the input field before the user enters a value.

Applies to :

Elements	Attribute
	placeholder
</a></td> <td width="319"><a href="https://www.w3schools.com/tags/att_textarea_placeholder.asp">placeholder</a></td> </tr> </tbody> </table> <h4><span style="color: #800080;"><strong>Placeholder for HTML Select box</strong></span></h4> <p>Select boxes don’t currently support the ‘placeholder’ attribute, so here’s a workaround that works just as well.</p><div class="rivax-toc-wrap"> <div class="toc-header"> <div class="toc-header-title-wrap"> <h3>Table Of Content</h3> </div> <div class="toc-header-collapse-wrap"> <span class="toc-header-collapse"><i class="ri-right-arrow-1"></i></span> </div> </div> <ul class="rivax-toc-items toc-hierarchically toc-counter"> <li class="toc-item-heading-4 level-1"><a class="rivax-toc-anchor" href="#placeholder" data-num="toc-1">Placeholder </a></li> <li class="toc-item-heading-4 level-1"><a class="rivax-toc-anchor" href="#applies-to" data-num="toc-2">Applies to </a></li> <li class="toc-item-heading-4 level-1"><a class="rivax-toc-anchor" href="#placeholder-for-html-select-box" data-num="toc-3">Placeholder for HTML Select box</a></li> </ul> </div> [pastacode lang=”markup” manual=”%3Cselect%3E%0A%20%20%20%20%3Coption%20value%3D%22%22%20disabled%20selected%20style%3D%22display%3A%20none%3B%22%3EPlease%20Choose%3C%2Foption%3E%0A%20%20%20%20%3Coption%20value%3D%220%22%3EOpen%20when%20powered%20(most%20valves%20do%20this)%3C%2Foption%3E%0A%20%20%20%20%3Coption%20value%3D%221%22%3EClosed%20when%20powered%2C%20auto-opens%20when%20power%20is%20cut%3C%2Foption%3E%0A%3C%2Fselect%3E%0A” message=”Html Code” highlight=”” provider=”manual”/] [ad type=”banner”] <p>The Disabled option stops the <option> being selected with both mouse and keyboard, whereas just using display: none allows the user to still select via the keyboard arrows. The display: none style just makes the list box look ‘nice’.</p> <p><strong>Note:</strong></p> <p>Using an empty value attribute on the “placeholder” option allows validation (required attribute) to work around having the “placeholder”, so if the option isn’t changed but is required; the browser should prompt the user to choose an option from the list.</p> <p><span style="color: #ff6600;"><strong>This method is working in the following browsers:</strong></span></p> <p>Google Chrome – v.43.0.2357.132<br /> Mozilla Firefox – v.39.0<br /> Safari – v.8.0.7 (Placeholder is visible in dropdown but is not selectable)<br /> Microsoft Internet Explorer – v.11 (Placeholder is visible in dropdown but is not selectable)<br /> Project Spartan – v.15.10130 (Placeholder is visible in dropdown but is not selectable)</p> <p><span style="color: #808000;"><strong>Strategies for Select Dropdown Lists Placeholder</strong></span></p> <p>The select dropdown a class called say not_chosen and style it in whatever way we want, to make the default option look like a placeholder, in this case just a different text color.</p> [pastacode lang=”markup” manual=”form%20select.not_chosen%20%7B%0A%20%20color%3A%20%23808080%3B%0A%7D%0A” message=”Html Code” highlight=”” provider=”manual”/] <p>Next we use JS to traverse through all the dropdowns on the page and give them this not_chosen class if it has the default value chosen or if the user chooses the default value manually. We’re assuming the default value to be an empty string ‘ ‘</p> <p><span style="color: #800080;"><strong>Example Program:</strong></span></p> [pastacode lang=”markup” manual=”%2F%2F%20Select%20dropdowns%0Aif%20(%24(‘select’).length)%20%7B%0A%20%20%20%20%2F%2F%20Traverse%20through%20all%20dropdowns%0A%20%20%20%20%24.each(%24(‘select’)%2C%20function%20(i%2C%20val)%20%7B%0A%20%20%20%20%20%20%20%20var%20%24el%20%3D%20%24(val)%3B%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2F%20If%20there’s%20any%20dropdown%20with%20default%20option%20selected%0A%20%20%20%20%20%20%20%20%2F%2F%20give%20them%20%60not_chosen%60%20class%20to%20style%20appropriately%0A%20%20%20%20%20%20%20%20%2F%2F%20We%20assume%20default%20option%20to%20have%20a%20value%20of%20”%20(empty%20string)%0A%20%20%20%20%20%20%20%20if%20(!%24el.val())%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24el.addClass(%22not_chosen%22)%3B%0A%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2F%20Add%20change%20event%20handler%20to%20do%20the%20same%20thing%2C%0A%20%20%20%20%20%20%20%20%2F%2F%20i.e.%2C%20adding%2Fremoving%20classes%20for%20proper%0A%20%20%20%20%20%20%20%20%2F%2F%20styling.%20Basically%20we%20are%20emulating%20placeholder%0A%20%20%20%20%20%20%20%20%2F%2F%20behaviour%20on%20select%20dropdowns.%0A%20%20%20%20%20%20%20%20%24el.on(%22change%22%2C%20function%20()%20%7B%20%20%20%20%20%20%20%20%20%20%20%20if%20(!%24el.val())%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24el.addClass(%22not_chosen%22)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20else%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24el.removeClass(%22not_chosen%22)%3B%20%20%20%20%20%20%20%20%7D)%3B%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%2F%2F%20end%20of%20each%20callback%20%20%7D)%3B%7D%0A” message=”Html Code” highlight=”” provider=”manual”/] [ad type=”banner”] <p><span style="color: #ff6600;"><strong>Explanation :</strong></span></p> <p>The dropdown will have the not_chosen class as long as the default value is chosen which means it’ll have gray color for text but as soon as it’s changed to some other option the class get’s removed and the text color fallbacks to whatever is defined in CSS for the select element (black in our case as nothing is specified).</p> <p><img loading="lazy" decoding="async" class="aligncenter wp-image-857 size-full" src="https://www.wikitechy.com/technology/wp-content/uploads/2017/03/Pic.png" alt="" width="524" height="216" /></p> <p>when you try to select an option when the default option is chosen, all of them are gray because that’s what we specified for our not_chosen class.</p> <p>On the other hand when an option with proper value is selected then all options are presented black.</p> <p>Maybe we want to show the first option as gray and all other as black regardless of the current choice.</p> <p>This piece of CSS does the trick</p> [pastacode lang=”markup” manual=”form%20select%20option%20%7B%0A%20%20%20%20color%3A%20%23080808%3B%0A%7D%0Aform%20select%20option%3Afirst-child%20%7B%0A%20%20%20%20color%3A%20%23808080%3B%0A%7D%0A” message=”Html Code” highlight=”” provider=”manual”/] <p>Although on Mac all the options in the active dropdown are always black, nothing can force them to change their colors apparently.</p> <p><img loading="lazy" decoding="async" class="alignnone size-full wp-image-858" src="https://www.wikitechy.com/technology/wp-content/uploads/2017/03/1.png" alt="" width="251" height="220" />  <img loading="lazy" decoding="async" class="alignnone size-full wp-image-859" src="https://www.wikitechy.com/technology/wp-content/uploads/2017/03/P1.png" alt="" width="280" height="252" /></p> <p><span style="color: #808000;"><strong>Implementation : </strong></span></p> <p><span style="color: #800080;"><strong>There are three different implementations:</strong></span><br /> pseudo-elements<br /> pseudo-classes<br /> nothing.</p> [ad type=”banner”] <div class="pk-clearfix"></div> <div class="pk-share-buttons-wrap pk-share-buttons-layout-default pk-share-buttons-scheme-default pk-share-buttons-has-counts pk-share-buttons-has-total-counts pk-share-buttons-after-content pk-share-buttons-mode-php pk-share-buttons-mode-rest" data-post-id="852" data-share-url="https://www.wikitechy.com/technology/make-placeholder-select-box/" > <div class="pk-share-buttons-total pk-share-buttons-total-no-count"> <div class="pk-share-buttons-title pk-font-primary">Total</div> <div class="pk-share-buttons-count pk-font-heading">0</div> <div class="pk-share-buttons-label pk-font-secondary">Shares</div> </div> <div class="pk-share-buttons-items"> <div class="pk-share-buttons-item pk-share-buttons-facebook pk-share-buttons-no-count" data-id="facebook"> <a href="https://www.facebook.com/sharer.php?u=https://www.wikitechy.com/technology/make-placeholder-select-box/" class="pk-share-buttons-link" target="_blank"> <i class="pk-share-buttons-icon pk-icon pk-icon-facebook"></i> <span class="pk-share-buttons-label pk-font-primary">Share</span> <span class="pk-share-buttons-count pk-font-secondary">0</span> </a> </div> <div class="pk-share-buttons-item pk-share-buttons-twitter pk-share-buttons-no-count" data-id="twitter"> <a href="https://x.com/share?&text=HTML%20%E2%80%93%20How%20to%20make%20a%20placeholder%20for%20a%20%E2%80%98select%E2%80%99%20box&url=https://www.wikitechy.com/technology/make-placeholder-select-box/" class="pk-share-buttons-link" target="_blank"> <i class="pk-share-buttons-icon pk-icon pk-icon-twitter"></i> <span class="pk-share-buttons-label pk-font-primary">Tweet</span> <span class="pk-share-buttons-count pk-font-secondary">0</span> </a> </div> <div class="pk-share-buttons-item pk-share-buttons-pinterest pk-share-buttons-no-count" data-id="pinterest"> <a href="https://pinterest.com/pin/create/bookmarklet/?url=https://www.wikitechy.com/technology/make-placeholder-select-box/&media=https://www.wikitechy.com/technology/wp-content/uploads/2017/03/Pic.png" class="pk-share-buttons-link" target="_blank"> <i class="pk-share-buttons-icon pk-icon pk-icon-pinterest"></i> <span class="pk-share-buttons-label pk-font-primary">Pin it</span> <span class="pk-share-buttons-count pk-font-secondary">0</span> </a> </div> <div class="pk-share-buttons-item pk-share-buttons-mail pk-share-buttons-no-count" data-id="mail"> <a href="mailto:?subject=HTML%20%E2%80%93%20How%20to%20make%20a%20placeholder%20for%20a%20%E2%80%98select%E2%80%99%20box&body=HTML%20%E2%80%93%20How%20to%20make%20a%20placeholder%20for%20a%20%E2%80%98select%E2%80%99%20box%20https://www.wikitechy.com/technology/make-placeholder-select-box/" class="pk-share-buttons-link" target="_blank"> <i class="pk-share-buttons-icon pk-icon pk-icon-mail"></i> <span class="pk-share-buttons-label pk-font-primary">Share</span> <span class="pk-share-buttons-count pk-font-secondary">0</span> </a> </div> </div> </div> <div class="clear"></div> <div class="single-post-tags"> <h4>Tags:</h4> <a href="https://www.wikitechy.com/technology/tag/adding-a-placeholder-to-the-select-tag-in-html5/" rel="tag">Adding a placeholder to the select tag in HTML5</a><a href="https://www.wikitechy.com/technology/tag/angular-2-select-placeholder/" rel="tag">angular 2 select placeholder</a><a href="https://www.wikitechy.com/technology/tag/angular2-select-placeholder/" rel="tag">angular2 select placeholder</a><a href="https://www.wikitechy.com/technology/tag/html-bootstrap-select-dropdown-list-placeholder/" rel="tag">html - Bootstrap select dropdown list placeholder</a><a href="https://www.wikitechy.com/technology/tag/html-how-do-i-make-a-placeholder-for-a-select-box/" rel="tag">html - How do I make a placeholder for a 'select' box?</a><a href="https://www.wikitechy.com/technology/tag/html5-placeholder-for-select-tag/" rel="tag">html5 - placeholder for select tag</a><a href="https://www.wikitechy.com/technology/tag/jquery-select-placeholder/" rel="tag">jquery select placeholder</a><a href="https://www.wikitechy.com/technology/tag/make-a-placeholder-for-a-select-box/" rel="tag">Make a placeholder for a "select" box</a><a href="https://www.wikitechy.com/technology/tag/placeholder-for-html-select-box/" rel="tag">Placeholder for HTML Select box</a><a href="https://www.wikitechy.com/technology/tag/placeholder-for-select-tag-in-html/" rel="tag">placeholder for select tag in html</a><a href="https://www.wikitechy.com/technology/tag/select-box-placeholder-label/" rel="tag">Select Box Placeholder Label</a><a href="https://www.wikitechy.com/technology/tag/select-dropdown-placeholder-with-disabled-options/" rel="tag">Select dropdown placeholder with disabled options</a><a href="https://www.wikitechy.com/technology/tag/select-placeholder-angular/" rel="tag">select placeholder angular</a><a href="https://www.wikitechy.com/technology/tag/select-placeholder-bootstrap/" rel="tag">select placeholder bootstrap</a><a href="https://www.wikitechy.com/technology/tag/select-placeholder-color/" rel="tag">select placeholder color</a><a href="https://www.wikitechy.com/technology/tag/select-tag-placeholder-rails/" rel="tag">select tag placeholder rails</a><a href="https://www.wikitechy.com/technology/tag/strategies-for-select-dropdown-lists-placeholder/" rel="tag">Strategies for Select Dropdown Lists Placeholder</a> </div> <div class="single-share-box-container"> <h4 class="title">Share Article</h4> <div class="single-share-box"> <a class="facebook" data-title="Facebook" rel="nofollow" href="https://www.facebook.com/sharer/sharer.php?u=https://www.wikitechy.com/technology/make-placeholder-select-box/" target="_blank"><i class="ri-facebook"></i></a> <a class="twitter" data-title="X" rel="nofollow" href="https://twitter.com/intent/tweet?text=HTML+%26amp%3B%238211%3B+How+to+make+a+placeholder+for+a+%26amp%3B%238216%3Bselect%26amp%3B%238217%3B+box&url=https://www.wikitechy.com/technology/make-placeholder-select-box/" target="_blank"><i class="ri-twitter"></i></a> <a class="linkedin" data-title="Linkedin" rel="nofollow" href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.wikitechy.com/technology/make-placeholder-select-box/&title=HTML+%26amp%3B%238211%3B+How+to+make+a+placeholder+for+a+%26amp%3B%238216%3Bselect%26amp%3B%238217%3B+box" target="_blank"><i class="ri-linkedin"></i></a> <a class="pinterest" data-title="Pinterest" rel="nofollow" href="https://pinterest.com/pin/create/link/?url=https://www.wikitechy.com/technology/make-placeholder-select-box/&media=https://www.wikitechy.com/technology/wp-content/uploads/2017/03/Pic.png&description=HTML+%26amp%3B%238211%3B+How+to+make+a+placeholder+for+a+%26amp%3B%238216%3Bselect%26amp%3B%238217%3B+box" target="_blank"><i class="ri-pinterest"></i></a> <a class="telegram" data-title="Telegram" rel="nofollow" href="https://t.me/share/?url=https://www.wikitechy.com/technology/make-placeholder-select-box/&text=HTML+%26amp%3B%238211%3B+How+to+make+a+placeholder+for+a+%26amp%3B%238216%3Bselect%26amp%3B%238217%3B+box" target="_blank"><i class="ri-telegram"></i></a> <a class="email" data-title="Email" rel="nofollow" href="mailto:?subject=HTML+%26amp%3B%238211%3B+How+to+make+a+placeholder+for+a+%26amp%3B%238216%3Bselect%26amp%3B%238217%3B+box&body=https://www.wikitechy.com/technology/make-placeholder-select-box/" target="_blank"><i class="ri-email"></i></a> <a class="whatsapp" data-title="Whatsapp" rel="nofollow" href="https://api.whatsapp.com/send?text=https://www.wikitechy.com/technology/make-placeholder-select-box/" target="_blank"><i class="ri-whatsapp"></i></a> </div> <div class="single-share-box-link"> <div class="form-content"> <input type="text" name="url" value="https://www.wikitechy.com/technology/make-placeholder-select-box/" class="share-link-text" readonly> <button type="submit" class="share-link-btn"> <i class="ri-copy"></i> <span class="copied-popup-text">Link Copied!</span> </button> </div> </div> </div> </div> </article> <div class="single-author-box-container"> <div class="single-author-box card-layout-w"> <div class="single-author-box-avatar"> <a href="https://www.wikitechy.com/technology/author/editor/"> <img alt='' src='https://secure.gravatar.com/avatar/e9531079fe7e07841b7b156c04d65e5f39d4adfd18b6ffe3edfff8ca5aab85b5?s=120&r=g' srcset='https://secure.gravatar.com/avatar/e9531079fe7e07841b7b156c04d65e5f39d4adfd18b6ffe3edfff8ca5aab85b5?s=240&r=g 2x' class='avatar avatar-120 photo' height='120' width='120' decoding='async'/> </a> </div> <div class="single-author-box-desc"> <span class="written-by">Author</span> <h4 class="author-name"><a href="https://www.wikitechy.com/technology/author/editor/">Wikitechy Editor</a></h4> <p class="author-bio">Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.</p> <div class="author-social-links"> </div> <a class="button more-articles" href="https://www.wikitechy.com/technology/author/editor/">Follow Me</a> </div> </div> </div> <div class="single-next-prev-posts-container"> <div class="single-next-prev-posts card-layout-w"> <div class="single-next-prev-posts-title"> <div class="rivax-divider-heading divider-style-1"> <div class="divider divider-1"></div> <div class="divider divider-2"></div> <h5 class="title"> <span class="title-inner"> <span class="title-text">Other Articles</span> </span> </h5> <div class="divider divider-3"></div> <div class="divider divider-4"></div> </div> </div> <div class="next-prev-row"> <div class="next-prev-col"> <div class="post-wrapper prev-post"> <div class="image has-animation"> <a href="https://www.wikitechy.com/technology/how-to-get-full-url-in-php/"> <div class="image-animation"></div> </a> </div> <div class="content"> <div class="next-prev-label"> <span class="icon"><i class="ri-right-arrow-1"></i></span> <span class="text">Previous</span> </div> <h3 class="title"> <a class="title-animation-underline" href="https://www.wikitechy.com/technology/how-to-get-full-url-in-php/">How to get the full URL in PHP</a> </h3> </div> </div> </div> <div class="next-prev-col"> <div class="post-wrapper next-post"> <div class="image has-animation"> <a href="https://www.wikitechy.com/technology/class-interface-enum-expected/"> <div class="image-animation"></div> </a> </div> <div class="content"> <div class="next-prev-label"> <span class="text">Next</span> <span class="icon"><i class="ri-right-arrow-1"></i></span> </div> <h3 class="title"> <a class="title-animation-underline" href="https://www.wikitechy.com/technology/class-interface-enum-expected/">Class, Interface, Or enum Expected error</a> </h3> </div> </div> </div> </div> </div> </div> <div class="comments-container" id="comments"> <div class="comments-area card-layout-w"> <div class="comments-title"> <div class="rivax-divider-heading divider-style-1"> <div class="divider divider-1"></div> <div class="divider divider-2"></div> <h5 class="title"> <span class="title-inner"> <span class="title-text"> No Comment! Be the first one. </span> </span> </h5> <div class="divider divider-3"></div> <div class="divider divider-4"></div> </div> </div> <div class="comment-list-wrapper"> <ol class="comment-list"> </ol><!-- .comment-list --> </div> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3><form action="https://www.wikitechy.com/technology/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><textarea id="comment" name="comment" rows="8" class="form-textarea" placeholder="Comment" required> Save my name, email, and website in this browser for the next time I comment. Related Posts How do I start learning HTML for Beginners? By Venkatesan Prabu ArticlesHow to C Programming – Vertex Cover Problem | Set 1 (Introduction and Approximate Algorithm) By Venkatesan Prabu C ProgrammingCoding How to Modify the URL without reloading the page By Wikitechy Editor HTMLJAVASCRIPT Scroll Our site uses cookies. By using this site, you agree to the Privacy Policy and Terms of Use. Accept