一天晚上，我在打发时间，在互联网上阅读文章，碰到
了Cyapa用户的
这个中心枢纽 ，在那里写了如何在纯CSS上自定义选择。 在查看此解决方案的过程中，我发现了一些非常不舒服的时刻，我试图将其修复为该问题的解决方案。 因此，让我们开始吧。
在查看该帖子的代码时，我注意到作者做出了一个选择，该选择在外部单击时无法关闭，以及在单击元素名称（如果已选择）时无法打开该选择。
在我的定制版本中，我和以前的作者一样，使用了标签，输入[type =“ radio”]和CSS选择器的功能。 由于使用CSS工具进行选择本身是完全不可能进行自定义的，因此我模仿了选择的行为。
首先，我添加了以下标记：
显示HTML代码 <label for="select" class="select"> <input type="radio" name="list" value="not_changed" id="bg" checked /> <input type="radio" name="list" value="not_changed" id="select"> <label class="bg" for="bg"></label> <div class="items"> <input type="radio" name="list" value="first_value" id="list[0]"> <label for="list[0]">First option</label> <input type="radio" name="list" value="second_value" id="list[1]"> <label for="list[1]">Second loooooong option</label> <span id="text">Select something...</span> </div> </label>
查看此代码时，您可能会遇到一个问题：“为什么所有输入都具有相同的名称？”。 我将立即回答：这样做是为了使我们的选择行为正确（必要时打开和关闭）。 但是首先是第一件事。 在我看来，让我们继续进行最有趣的部分-CSS。
显示CSS代码 input { display: none; } #text { position: absolute; display: block; top: 0; padding-left: 10px; } .select { display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; } .select:before { content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; } .select input[name="list"]:not(:checked) ~ #text { color: black; background: white; } .select input[name="list"]:checked ~ #text { background: transparent; color: transparent; z-index: 2; } #select:disabled ~ .items #text { background: #eee; } .items { display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; } #select:not(:checked) ~ .items { height: 30px; } .items label { border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; } .items label:hover { background: #eee; cursor: pointer; } #select:checked ~ .items { padding-top: 30px; } #select:checked ~ .items label { display: block; } .items input:checked + label { display: block!important; border: none; background: white; } #select:checked ~ .bg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.4); }
这是最有趣的部分，在其中必须了解如何更改输入的选择（所有具有无线电类型的输入都具有相同的名称=>我们只能选择其中之一）如何影响我们的选择。 此选项的另一个功能是可以使用#select上的disabled属性来禁用选择。
您可以
在此处找到完成的示例。
实际上，仅此而已。 固定了先前作者的一些缺点，因此，我认为此解决方案目前可以认为是select的理想CSS版本。 我希望我的解决方案对某人有用。