Dropdown select menu in css only

Question

I want to do the following:

I want to build a select menu but I have no Bootstrap, if I had, I would have done so with btn-groups and such.

I need to do so using pure css if possible, but I have a slight problem.

Im using angular.js in my front end, and if a select menu is open, I want to close it not only when click on an item inside it, but with any click on the screen (not whithin the window of the items and such),

How can I do this without any ugly jquery code? pure angular?

http://stackoverflow.com/questions/9100344/pure-css-multi-level-drop-down-menu — Kalhan.Toress, Dec 04 '14 at 08:48

score 3 · Accepted Answer · answered Dec 04 '14 at 08:34

This is inherantly tricky to due purely in CSS, in real world use cases you will want to implement a solution utilising JS.

However, nothing is impossible!*

Pure CSS Select Menu

HTML

<ul tabindex='0'>
    <li>
        <input id='item1' type='radio' name='item' checked='true' />
        <label for='item1'>Item 1</label>
    </li>
    <li>
        <input id='item2' type='radio' name='item' />
        <label for='item2'>Item 2</label>
    </li>
    <li>
        <input id='item3' type='radio' name='item' />
        <label for='item3'>Item 3</label>
    </li>
</ul>

CSS

ul, li {
    list-style:none;
    margin:0;
    padding:0;
}
li input {
    display:none;
}
ul:not(:focus) input:not(:checked), ul:not(:focus) input:not(:checked) + label {
    display:none;
}
input:checked+label {
    color:red;
}

^{*Unfortunately, you just cant get all the functionality you want...but (I believe) its as close as you'll get in CSS alone}

score 0 · Answer 2 · answered Nov 16 '15 at 03:38

This css will kinda get rid of a lot of standard browser stuff, and maybe give you a good starting point for building a pure css 'bootstrap-ish' select menu.

select{
padding:3px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
-moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
background: #f8f8f8;
color:#888;
border:none;
outline:none;
display: inline-block;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
cursor:pointer;

}

Dropdown select menu in css only

2 Answers2

Pure CSS Select Menu