Determine if a Select element is dropped-down - using only CSS or SASS

Question

Only using CSS, is there a way to determine if a select box is dropped down or closed?

I know that there are pseudo classes such as :checked and :indeterminate, but I haven't seen one that will work in conjunction with the select element the way I want.

Here's an example of my select box - with an id of "field-action" :

<select id="field-action" name="" class=" " data-validation-required="true">    
      <option value="" selected="selected">—</option>        
      <option value="1" id="field-action-lock">Lock</option>    
      <option value="2" id="field-action-unlock">Unlock</option>    
      <option value="3" id="field-action-pin">Pin</option>    
      <option value="4" id="field-action-unpin">Unpin</option>    
      <option value="5" id="field-action-delete">Delete</option>    
      <option value="6" id="field-action-undelete">Undelete</option>    
      <option value="7" id="field-action-move">Move</option>    
      <option value="8" id="field-action-merge">Merge</option>    
      <option value="9" id="field-action-spam">Spam</option>    
      <option value="10" id="field-action-notspam">Not Spam</option>    
    </select>

The goal - using pure CSS or SASS - is to determine if the select list is dropped down, and if so, give it a bottom margin of about 50px. When the box is dropped, it overlays some content that cannot be covered under any circumstances.

Any input is appreciated - thanks!

Out of curiosity, is it a hard requirement to not doing this in JS? — Boldewyn, Jul 18 '13 at 19:19
[The CSS 3 spec](http://www.w3.org/TR/css3-selectors/#UIstates) seems not to offer much here... — Boldewyn, Jul 18 '13 at 19:21
It is requested that it be done entirely using CSS - however, it may turn out that JS is a necessity to achieve the proper effect. — PhillipKregg, Jul 18 '13 at 22:04
I experimented a bit with setting height to 0 on the select and trying to replace it, but to no result. So my best guess is, that @clrockwell's answer is the closest you can get. — Boldewyn, Jul 19 '13 at 07:02

score 2 · Answer 1 · answered Jul 18 '13 at 18:02

2

SELECT elements are not rendered using HTML, they are part of the browser/operating system. When opened they do not take up any space within the DOM, therefore CSS cannot detect this.

answered Jul 18 '13 at 18:02

Diodeus - James MacFarlane

112,730
33
157
176

Chris Rockwell · Answer 2 · 2013-07-18T19:05:13.247

2

Although this appears to be the only way to manipulate the select box via CSS, it is not acceptable as tabbing into the select box triggers the focus but does open the select box. The user must click to open it.

Why not :focus?

select:focus {
}

Fiddle: http://jsfiddle.net/ewqSA/

edited Jul 18 '13 at 19:05

answered Jul 18 '13 at 18:05

Chris Rockwell

1,688
2
21
36

1

This is the only option available via CSS. – cimmanon Jul 18 '13 at 18:16
I forked your jsfiddle here http://jsfiddle.net/56mex/ to add a jQuery function that will blur the select drop down list after a selection is made. I changed the translate you were using into adding margin-bottom like the OP is requesting, and made it large enough for the specific list in the fiddle. The only thing buggy is when you click the drop down arrow then click it again to close it, the `change` event doesn't fire to blur the select list. – Zack Jul 18 '13 at 19:51

score 1 · Answer 3 · edited May 23 '17 at 12:12

There might be an alternative way of showing your options. Instead of a drop down list, you could use a select list like is in this jsfiddle http://jsfiddle.net/cSSjF/ linked in this answer https://stackoverflow.com/a/8788381/1804496

Select list

<select size="5">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
</select>

This still allows only one option to be selected, and lets you control how many options you want to be visible. I'm assuming you could show just enough options that your important content isn't pushed off the viewable area.

Yes, and if you're able to use checkboxes, then you have the `:checked` pseudo element to play with too — stephenmurdoch, Jul 18 '13 at 18:03

Determine if a Select element is dropped-down - using only CSS or SASS

3 Answers3