我想在表单中创建类似于下拉菜单的内容，但我希望能够在每个选项中显示图像或其他内容。有点像msdropdown但有能力将任何内容放入下拉列表中，而不仅仅是图像。例如，我可能想要使用css设计的内嵌块元素的彩色矩形。
我此刻接近它的方式是建立在checkbox hack上
这是我迄今为止所做的，在我测试过的桌面浏览器中效果很好： jsfiddle
麻烦的是，在iOS和Android上，当您单击下拉列表展开它时，它会选择列表中的第一个选项。我希望第一次单击以展开下拉列表，但不要单击任何选项。有没有办法做到这一点，例如通过添加一个简单的javascript？
或者，或者，是否有更优雅的方法来解决在下拉菜单中使用任意内容而不是使用复选框黑客的整个问题？
以下JSfiddle的完整代码：
HTML
<p>Show what's currently selected, using javascript:</p>
<input type="text" value="" id="trace"/>
<p>Dropdown with custom styling, using the checkbox hack, along the lines of <a href="https://stackoverflow.com/a/9599581/3093080">this</a>, using the variant suggested by "namehere" in the comments.</p>
<form class="my-image-dropdown">
<label>
<input type="radio" name="line-style" value="1" />
<div class="dropdown-label">
<span class="color-swatch vmiddle">
<span style="background-color:red;"> </span><span style="background-color:green;"> </span><span style="background-color:blue;"> </span>
</span>
<span class="collapsedonly vmiddle">▾</span>
<span class="checkedonly vmiddle">✓</span>
</div>
</label>
<label>
<input type="radio" name="line-style" value="2" checked="checked"/>
<div class="dropdown-label">
<span class="color-swatch vmiddle">
<span style="background-color:purple;"> </span><span style="background-color:green;"> </span><span style="background-color:pink;"> </span>
</span>
<span class="collapsedonly vmiddle">▾</span>
<span class="checkedonly vmiddle">✓</span>
</div>
</label>
<label>
<input type="radio" name="line-style" value="3" />
<div class="dropdown-label">
<span class="color-swatch vmiddle">
<span style="background-color:grey;"> </span><span style="background-color:darkblue;"> </span><span style="background-color:black;"> </span>
</span>
<span class="collapsedonly vmiddle">▾</span>
<span class="checkedonly vmiddle">✓</span>
</div>
</label>
<label>
<input type="radio" name="line-style" value="4" />
<div class="dropdown-label">
<span class="color-swatch vmiddle">
<span style="background-color:yellow;"> </span><span style="background-color:orange;"> </span><span style="background-color:green;"> </span>
</span>
<span class="collapsedonly vmiddle">▾</span>
<span class="checkedonly vmiddle">✓</span>
</div>
</label>
</form>
JAVASCRIPT
/* Update the trace showing currently selected option */
$( document ).ready(function() {
var i = setInterval(function(){$("#trace").val($("input:checked").val());},100);
});
/* Fix the sticky hover bug on iOS - see http://www.dynamicdrive.com/forums/ entry.php?335-iOS-Sticky-Hover-Fix-Unhovering-dropdown-CSS-menus */
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document);
CSS
/* Hide the radio buttons */
.my-image-dropdown input {
/*height: 0; width: 0; opacity:0;*/ /* This was in original code, seems unnecessary */
display:none; /* Using display:none seems easier than setting height, width, opacity */
}
/* Style the container for both minimized and maximised state*/
.my-image-dropdown {
width: auto;
height: auto;
background: #DDDDDD;
border: 1px solid #999999;
display: table;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
/* Collapse the dropdown when no hover, by hiding the contents of the label elements */
.my-image-dropdown label input ~ * {
display:none;
}
/* Expand the dropdown on hover (mouse) or tap (touch-screen) */
.my-image-dropdown:hover {
height: auto; /* Use fixed height or else auto to fit all color swatches */
overflow-y: scroll; /* If fixed height, use native scrolling */
}
.my-image-dropdown:hover label input ~ * {
/* Use display:inline-block for tiling */
/* or display:block; for full-width vertical stacking */
/* or display:table; for vertical stacking and fit to width of contents */
display: table; /* Vertical stacking and fit to width of contents */
}
/* Add some space between rows when expanded */
/* This uses the :not() selector which has pretty solid browser support */
/* http://caniuse.com/#feat=css-sel3 */
.my-image-dropdown:hover label:not(:first-child) input ~ * {
margin-top: 10px;
}
/* Display the checked option even when the dropdown is collapsed */
.my-image-dropdown label input:checked ~ * {
display:table;
/* Optional: apply styling to the chosen option */
}
/* Apply effect when hovering over a particular label */
.my-image-dropdown label:hover input ~ * {
opacity:0.5;
}
/* Show the down arrow only when collapsed and only for the checked option */
.my-image-dropdown label .collapsedonly {
display:none;
}
.my-image-dropdown label input:checked ~ .dropdown-label .collapsedonly {
display:inline;
}
.my-image-dropdown:hover label input:checked ~ .dropdown-label .collapsedonly {
display:none;
}
/* Show a tick next to the checked option but only when expanded */
.my-image-dropdown label .checkedonly {
display:none;
}
.my-image-dropdown:hover label input:checked ~ .dropdown-label .checkedonly {
display:inline;
}
/* Style the tick and the down arrow */
.dropdown-label .checkedonly, .dropdown-label .collapsedonly {
font-size: 120%;
margin-left: 15px;
margin-right: 5px;
}
/* Style the colored squares */
.color-swatch{
display: inline-block;
}
.color-swatch > span {
display: inline-block;
width:50px;
height:50px; /* If you change this then also change line-height of dropdown-label */
margin:2px;
}
/* Vertically center an element within its neighbour */
.vmiddle {
display: inline-block;
vertical-align: middle;
}
答案 0 :(得分：0)
经过反思，使用jquery从头开始编写下拉列表更容易，而不是尝试修复复选框hack。我找到的最佳解决方案是： http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/