{"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\"><input><\/a><\/td>\n<td width=\"319\"><a href=\"https:\/\/www.w3schools.com\/tags\/att_input_placeholder.asp\">placeholder<\/a><\/td>\n<\/tr>\n<tr>\n<td width=\"319\"><a href=\"https:\/\/www.w3schools.com\/tags\/tag_textarea.asp\"><textarea><\/a><\/td>\n<td width=\"319\"><a href=\"https:\/\/www.w3schools.com\/tags\/att_textarea_placeholder.asp\">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\u2019t currently support the \u2018placeholder\u2019 attribute, so here\u2019s a workaround that works just as well.<\/p>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<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 \u2018nice\u2019.<\/p>\n<p><strong>Note:<\/strong><\/p>\n<p>Using an empty value attribute on the \u201cplaceholder\u201d option allows validation (required attribute) to work around having the \u201cplaceholder\u201d, so if the option isn\u2019t 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 \u2013 v.43.0.2357.132<br \/>\nMozilla Firefox \u2013 v.39.0<br \/>\nSafari \u2013 v.8.0.7 (Placeholder is visible in dropdown but is not selectable)<br \/>\nMicrosoft Internet Explorer \u2013 v.11 (Placeholder is visible in dropdown but is not selectable)<br \/>\nProject Spartan \u2013 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[pastacode lang=\u201dmarkup\u201d manual=\u201dform%20select.not_chosen%20%7B%0A%20%20color%3A%20%23808080%3B%0A%7D%0A\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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[pastacode lang=\u201dmarkup\u201d manual=\u201d%2F%2F%20Select%20dropdowns%0Aif%20(%24(\u2018select\u2019).length)%20%7B%0A%20%20%20%20%2F%2F%20Traverse%20through%20all%20dropdowns%0A%20%20%20%20%24.each(%24(\u2018select\u2019)%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\u2019s%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\u201d%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\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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[pastacode lang=\u201dmarkup\u201d manual=\u201dform%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\u201d message=\u201dHtml Code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dbanner\u201d]\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 placeholder placeholder Placeholder for HTML [&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}]}}