{"id":852,"date":"2017-03-18T18:40:11","date_gmt":"2017-03-18T13:10:11","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=852"},"modified":"2017-03-29T13:09:20","modified_gmt":"2017-03-29T07:39:20","slug":"make-placeholder-select-box","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/make-placeholder-select-box\/","title":{"rendered":"HTML &#8211; How to make a placeholder for a &#8216;select&#8217; box"},"content":{"rendered":"<h4 id=\"placeholder\"><span style=\"color: #ff6600;\"><strong>Placeholder :<\/strong><\/span><\/h4>\n<ul>\n<li>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).<\/li>\n<li>The short hint is displayed in the input field before the user enters a value.<\/li>\n<\/ul>\n<h4 id=\"applies-to\"><span style=\"color: #808000;\"><strong>Applies to :<\/strong><\/span><\/h4>\n<table width=\"638\">\n<tbody>\n<tr>\n<td width=\"319\">Elements<\/td>\n<td width=\"319\">Attribute<\/td>\n<\/tr>\n<tr>\n<td width=\"319\"><a href=\"https:\/\/www.w3schools.com\/tags\/tag_input.asp\" target=\"_blank\" rel=\"noopener\">&lt;input&gt;<\/a><\/td>\n<td width=\"319\"><a href=\"https:\/\/www.w3schools.com\/tags\/att_input_placeholder.asp\" target=\"_blank\" rel=\"noopener\">placeholder<\/a><\/td>\n<\/tr>\n<tr>\n<td width=\"319\"><a href=\"https:\/\/www.w3schools.com\/tags\/tag_textarea.asp\" target=\"_blank\" rel=\"noopener\">&lt;textarea&gt;<\/a><\/td>\n<td width=\"319\"><a href=\"https:\/\/www.w3schools.com\/tags\/att_textarea_placeholder.asp\" target=\"_blank\" rel=\"noopener\">placeholder<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4 id=\"placeholder-for-html-select-box\"><span style=\"color: #800080;\"><strong>Placeholder for HTML Select box<\/strong><\/span><\/h4>\n<p>Select boxes don&#8217;t currently support the &#8216;placeholder&#8217; attribute, so here&#8217;s a workaround that works just as well.<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;select&gt;<br\/>    &lt;option value=&quot;&quot; disabled selected style=&quot;display: none;&quot;&gt;Please Choose&lt;\/option&gt;<br\/>    &lt;option value=&quot;0&quot;&gt;Open when powered (most valves do this)&lt;\/option&gt;<br\/>    &lt;option value=&quot;1&quot;&gt;Closed when powered, auto-opens when power is cut&lt;\/option&gt;<br\/>&lt;\/select&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p>The Disabled option stops the &lt;option&gt; 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 &#8216;nice&#8217;.<\/p>\n<p><strong>Note:<\/strong><\/p>\n<p>Using an empty value attribute on the &#8220;placeholder&#8221; option allows validation (required attribute) to work around having the &#8220;placeholder&#8221;, so if the option isn&#8217;t changed but is required; the browser should prompt the user to choose an option from the list.<\/p>\n<p><span style=\"color: #ff6600;\"><strong>This method is working in the following browsers:<\/strong><\/span><\/p>\n<p>Google Chrome &#8211; v.43.0.2357.132<br \/>\nMozilla Firefox &#8211; v.39.0<br \/>\nSafari &#8211; v.8.0.7 (Placeholder is visible in dropdown but is not selectable)<br \/>\nMicrosoft Internet Explorer &#8211; v.11 (Placeholder is visible in dropdown but is not selectable)<br \/>\nProject Spartan &#8211; v.15.10130 (Placeholder is visible in dropdown but is not selectable)<\/p>\n<p><span style=\"color: #808000;\"><strong>Strategies for Select Dropdown Lists Placeholder<\/strong><\/span><\/p>\n<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>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">form select.not_chosen {<br\/>  color: #808080;<br\/>}<\/code><\/pre> <\/div>\n<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\u2019re assuming the default value to be an empty string \u2018 \u2018<\/p>\n<p><span style=\"color: #800080;\"><strong>Example Program:<\/strong><\/span><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">\/\/ Select dropdowns<br\/>if ($(&#039;select&#039;).length) {<br\/>    \/\/ Traverse through all dropdowns<br\/>    $.each($(&#039;select&#039;), function (i, val) {<br\/>        var $el = $(val);         <br\/>        \/\/ If there&#039;s any dropdown with default option selected<br\/>        \/\/ give them `not_chosen` class to style appropriately<br\/>        \/\/ We assume default option to have a value of &#039;&#039; (empty string)<br\/>        if (!$el.val()) {<br\/>            $el.addClass(&quot;not_chosen&quot;);<br\/>        }         <br\/>        \/\/ Add change event handler to do the same thing,<br\/>        \/\/ i.e., adding\/removing classes for proper<br\/>        \/\/ styling. Basically we are emulating placeholder<br\/>        \/\/ behaviour on select dropdowns.<br\/>        $el.on(&quot;change&quot;, function () {            if (!$el.val())<br\/>                $el.addClass(&quot;not_chosen&quot;);<br\/>            else<br\/>                $el.removeClass(&quot;not_chosen&quot;);        });         <br\/>        \/\/ end of each callback  });}<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p><span style=\"color: #ff6600;\"><strong>Explanation :<\/strong><\/span><\/p>\n<p>The dropdown will have the not_chosen class as long as the default value is chosen which means it\u2019ll have gray color for text but as soon as it\u2019s changed to some other option the class get\u2019s 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>\n<p><img fetchpriority=\"high\" 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>\n<p>when you try to select an option when the default option is chosen, all of them are gray because that\u2019s what we specified for our not_chosen class.<\/p>\n<p>On the other hand when an option with proper value is selected then all options are presented black.<\/p>\n<p>Maybe we want to show the first option as gray and all other as black regardless of the current choice.<\/p>\n<p>This piece of CSS does the trick<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">Html Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">form select option {<br\/>    color: #080808;<br\/>}<br\/>form select option:first-child {<br\/>    color: #808080;<br\/>}<\/code><\/pre> <\/div>\n<p>Although on Mac all the options in the active dropdown are always black, nothing can force them to change their colors apparently.<\/p>\n<p><img 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\" \/>\u00a0\u00a0<img 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>\n<p><span style=\"color: #808000;\"><strong>Implementation : <\/strong><\/span><\/p>\n<p><span style=\"color: #800080;\"><strong>There are three different implementations:<\/strong><\/span><br \/>\npseudo-elements<br \/>\npseudo-classes<br \/>\nnothing.<\/p>\n[ad type=&#8221;banner&#8221;]\n","protected":false},"excerpt":{"rendered":"<p>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 &lt;input&gt; placeholder &lt;textarea&gt; placeholder Placeholder [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":857,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[1639,1651,1649,1637,1636,1635,1648,1643,1638,1647,1642,1640,1645,1644,1646,1650,1641],"class_list":["post-852","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","tag-adding-a-placeholder-to-the-select-tag-in-html5","tag-angular-2-select-placeholder","tag-angular2-select-placeholder","tag-html-bootstrap-select-dropdown-list-placeholder","tag-html-how-do-i-make-a-placeholder-for-a-select-box","tag-html5-placeholder-for-select-tag","tag-jquery-select-placeholder","tag-make-a-placeholder-for-a-select-box","tag-placeholder-for-html-select-box","tag-placeholder-for-select-tag-in-html","tag-select-box-placeholder-label","tag-select-dropdown-placeholder-with-disabled-options","tag-select-placeholder-angular","tag-select-placeholder-bootstrap","tag-select-placeholder-color","tag-select-tag-placeholder-rails","tag-strategies-for-select-dropdown-lists-placeholder"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/852","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=852"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/852\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media\/857"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=852"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=852"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=852"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}