仅css中的下拉选择菜单

我想做以下工作：

我想建立一个选择菜单，但我没有引导，如果我有，我会用

btn组

这样做

如果可能的话，我需要使用纯css，但是我有一个小问题

我在我的前端使用angular.js，如果选择菜单打开，我不仅想在点击菜单中的某个项目时关闭它，而且想在屏幕上任意点击它（而不是在项目窗口中等等）

---

没有任何难看的jquery代码，我怎么能做到这一点？纯角度？

这是天生的棘手问题，因为纯粹在CSS中，在现实世界的用例中，您将希望实现一个利用JS的解决方案

然而，没有什么是不可能的*

HTML

---

*不幸的是，你无法获得你想要的所有功能…但是（我相信）这是你在CSS中所能获得的最接近的功能了

这个CSS将有点摆脱很多标准浏览器的东西，也许会给你一个很好的起点来构建一个纯CSS的“bootstrap-ish”选择菜单

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;

}

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;
}

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;