CODEWITHSUNDEEP
css
totothegreat
totothegreat

Reputation: 1643

Dropdown select menu in css only

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?

Upvotes: 1

Views: 537

Answers (2)

Tarek Adam
Tarek Adam

Reputation: 3525

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;

}

Upvotes: 0

SW4
SW4

Reputation: 71140

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

Upvotes: 3

Related Questions