Comments on: :default https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Mon, 28 Sep 2020 14:30:51 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: A2D https://css-tricks.com/almanac/selectors/d/default/#comment-1612032 Wed, 27 Sep 2017 15:42:35 +0000 http://css-tricks.com/?page_id=14174#comment-1612032 Hi, there’s no mention of the select (dropdown) element and any child option elements that are selected when the select is initially rendered. This seems to work fine on Chrome and Safari (OSX and iOS).

With this markup:

<select required>
    <option value="" disabled="disabled" selected="selected">Select a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

and this CSS:

select option:default {
    display: none;
}

You get a dropdown where the first option is displayed like a placeholder, but it is not visible in the options list when displayed.

This also works for the mobile select widgets on Chrome Android and Safari iOS.

]]> By: Chris Cuilla https://css-tricks.com/almanac/selectors/d/default/#comment-1603589 Fri, 19 Aug 2016 19:24:10 +0000 http://css-tricks.com/?page_id=14174#comment-1603589 The HTML is slightly wrong above. The name for the radio inputs should all be the same. For example, they should all be name=”color”.

]]> By: Jyoti Puri https://css-tricks.com/almanac/selectors/d/default/#comment-1587086 Thu, 27 Nov 2014 12:36:32 +0000 http://css-tricks.com/?page_id=14174#comment-1587086 Hey,

The example of default above is not working in my chrome even.

]]> By: amin https://css-tricks.com/almanac/selectors/d/default/#comment-1582111 Wed, 04 Jun 2014 20:13:50 +0000 http://css-tricks.com/?page_id=14174#comment-1582111 I am using last version of Browsers. It seems the :default pseudo just work on Firefox.

]]>