Understanding of default style

[cpntgt]

Hello everyone,

I'm trying to get the bubble unopened style for my selects. In other words the black font-color when the select isn't open just like in the demo page here (http://groenroos.github.io/minimalect/)

At the moment the select look I have is the "Default Theme" look. Can someone point to me what css rule I need? I looked at the page over and over and I just don't see the css style that is being applied that makes the color lighter?

Thanks Christian

[groenroos]

Hello Christian,

The reason the text is black in the "Bubble" theme example on the site is because it already has an option selected by default.

The gray text you're looking at in the default theme example is the placeholder. You can style it using the vendor-prefixed placeholder pseudoselectors; http://css-tricks.com/snippets/css/style-placeholder-text/ (remember to keep them separate or otherwise every browser will ignore it)

However, keep in mind that this would also style the placeholder when the a minimalect with a choice selected is opened again (i.e. open the "Bubble" example and "Ice cream" goes gray). This would mean losing the visual cue that the select is typable.

Depending on what's more appropriate for your application, you'd have to decide between having a pre-selected option for each select, or impairing the visual feedback.

-- @groenroos

[cpntgt]

Hi groenroos,

Thanks for the help. I saw that once selected the style changed, but I didn't know of the placeholder attribute default styling. The weirdest thing is that the css rule for the placeholder doesn't even appear in the Chrome Developper tools Style inspector! Normally every css rule is shown. I'll have to read up on why the placeholder is different.