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
<input> placeholder
<textarea> placeholder

Placeholder for HTML Select box

Select boxes don’t currently support the ‘placeholder’ attribute, so here’s a workaround that works just as well.

[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”]

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’.

Note:

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.

This method is working in the following browsers:

Google Chrome – v.43.0.2357.132
Mozilla Firefox – v.39.0
Safari – v.8.0.7 (Placeholder is visible in dropdown but is not selectable)
Microsoft Internet Explorer – v.11 (Placeholder is visible in dropdown but is not selectable)
Project Spartan – v.15.10130 (Placeholder is visible in dropdown but is not selectable)

Strategies for Select Dropdown Lists Placeholder

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.

[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”/]

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 ‘ ‘

Example Program:

[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”]

Explanation :

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).

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.

On the other hand when an option with proper value is selected then all options are presented black.

Maybe we want to show the first option as gray and all other as black regardless of the current choice.

This piece of CSS does the trick

[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”/]

Although on Mac all the options in the active dropdown are always black, nothing can force them to change their colors apparently.

  

Implementation :

There are three different implementations:
pseudo-elements
pseudo-classes
nothing.

[ad type=”banner”]

Categorized in: