Question

我想做以下事情：

我想构建一个选择菜单，但我没有Bootstrap，如果有的话，我会用btn-groups等来完成。

如果可能，我需要使用纯css，但我有一点问题。

我在我的前端使用angular.js，如果打开一个选择菜单，我不仅要点击它里面的项目，而且要点击屏幕上的任何一个项目（不是在窗口中物品等），

如何在没有任何丑陋的jquery代码的情况下执行此操作？纯角？

Answer 1

纯粹在CSS中这是非常棘手的，在现实世界的用例中，您需要使用JS实现解决方案。

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

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

^{*不幸的是，你只是无法获得你想要的所有功能......但是（我相信）它就像你一样接近CSS？}

Answer 2

这个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;

}

仅在css中下拉选择菜单

2 个答案:

Pure CSS Select Menu