如何在仅包含html和css的表单中创建水平选择器？

Question

我正在尝试创建一个像这样的菜单：

 ul#menu { padding: 0; font-family: sans-serif; } ul#menu li { display: inline-block; } ul#menu li span { background-color: #d3d3d3; color: black; padding: 5px 20px; text-decoration: none; transition: 0.2s; } ul#menu li span:hover { background-color: #808080; transition: 0.3s; } 

 <h2>Horizontal List</h2> <ul id="menu"> <li><span>HTML</span></li><li> <span>CSS</span></li><li> <span>JavaScript</span></li><li> <span>PHP</span></li> </ul> 

但是，这样做的行为类似于html表单中的<select>字段，因此当单击元素之一时，它将保持选中状态（并在css中变暗）。 我该怎么办？ （最好不要使用javascript，因为我认为这不是必需的，但如果需要的话...）。 我觉得这可能与html中的form=""属性有关，但我不知道。

Answer 1

您可以使用单选按钮输入，标签，标签的for属性，相邻的同级选择器以及许多 ID的组合来完成此操作。

基本上，此方法将每个菜单按钮设置为具有for属性的标签。 这使您可以将输入与标签相关联，而无需使输入成为标签的后代。 然后，使用相邻的同级选择器（ +语法）和:checked伪类，您可以对标签进行样式化，只要将输入放置在标签之前即可（如果不能在标签之前立即使用， ~选择器也可以使用） ）。 然后，只需隐藏输入即可。

 ul#menu { padding: 0; font-family: sans-serif; } ul#menu li { display: inline-block; } ul#menu li label { background-color: #d3d3d3; color: black; padding: 5px 20px; text-decoration: none; transition: 0.2s; } ul#menu li label:hover, ul#menu li input:checked + label { background-color: #808080; transition: 0.3s; } ul#menu li input { position: fixed; left: 100%; } 

 <h2>Horizontal List</h2> <ul id="menu"> <li><input type="radio" name="menu-selection" id="html-item"><label for="html-item">HTML</label></li><li> <input type="radio" name="menu-selection" id="css-item"><label for="css-item">CSS</label></li><li> <input type="radio" name="menu-selection" id="js-item"><label for="js-item">JavaScript</label></li><li> <input type="radio" name="menu-selection" id="php-item"><label for="php-item">PHP</label></li> </ul> 

Answer 2

您可以使用复选框和标签重新创建该效果：

 ul#menu li span:hover { background-color: #808080; transition: 0.3s; } input { display: none; } label { background-color: #d3d3d3; color: black; display: inline-block; font-family: sans-serif; padding: 5px 20px; text-decoration: none; transition: 0.2s; } input:checked +label { background-color: #808080; transition: 0.3s; } 

 <h2>Horizontal List</h2> <input id="html" type="radio" name="opt" /><label for="html">HTML</label><input id="css" type="radio" name="opt" /><label for="css">CSS</label><input id="javascript" type="radio" name="opt" /><label for="javascript">JavaScript</label><input id="php" type="radio" name="opt" /><label for="php">PHP</label>