如何在僅包含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>