我设法创建了一个非常好的自定义选择，它几乎在所有方面都有效（JS 需要调整/优化），但我在复制实际选择元素方面遇到的一个问题是相对父容器设置为overflow: hidden;. 逻辑告诉我标准 HTML 元素是特殊的，并且很可能已经设置了覆盖 CSS 选项的方法，但是我想知道是否有某种形式的 hack 可以让我用我的自定义选择列表复制它。
编辑 我需要的解决方案是允许选择显示在父元素之外，在父元素上设置溢出隐藏。
这是小提琴：http: //jsfiddle.net/8Jfjq/
HTML
<div style="height: 50px; width: 100%: float: left; background: red; overflow: hidden;">
<div class="customSelect" data-auto-submit="no" style="float: left; margin-right: 20px; z-index: 1000;">
<input class="customSelectInput" type="hidden" name="category"></input>
<p class="customSelectText"></p>
<ul class="customSelectList" data-open="no">
<li class="customSelectOption" data-value="1">1</li>
<li class="customSelectOption" data-value="2">2</li>
<li class="customSelectOption" data-value="3">3</li>
<li class="customSelectOption" data-value="4">4</li>
<li class="customSelectOption" data-value="5">5</li>
</ul>
</div>
<select style="float: left; height: 25px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
jQuery
$(document).ready(function () {
var custSel = $(".customSelect");
custSel.each(function () {
$(this).children(".customSelectList").show();
var custSelInput = $(this).children(".customSelectInput"),
custSelText = $(this).children(".customSelectText"),
custSelList = $(this).children(".customSelectList"),
custSelOption = custSelList.children(".customSelectOption"),
selectedOpt = custSelList.children("[data-selected=\"true\"]"),
findSelected = selectedOpt.length,
biggestWidth = 0;
custSelOption.each(function () {
$(this).parent().siblings(".customSelectText").text($(this).text());
if ($(this).width() > biggestWidth) {
biggestWidth = $(this).parent().parent().width();
}
});
if (findSelected == 0) {
custSelList.children(".customSelectOption:first-child").attr("data-selected", "true");
selectedOpt = custSelList.children(".customSelectOption:first-child");
}
if (custSelList.height() > "200") {
custSelList.css({
height: "200px",
"overflow-y": "scroll"
});
}
custSelInput.val(selectedOpt.attr("data-value"));
custSelText.text(selectedOpt.text());
$(this).width(biggestWidth);
custSelList.hide();
});
$(document).click(function (e) {
if (e.target != "customSelect") {
$(".customSelectList").attr("data-open", "no");
$(".customSelectList").hide();
}
});
$(".customSelectText").click(function (e) {
e.stopPropagation();
if ($(this).siblings(".customSelectList").attr("data-open") == "yes") {
$(this).siblings(".customSelectList").hide();
$(this).siblings(".customSelectList").attr("data-open", "no");
} else {
$(".customSelectList").each(function () {
$(this).attr("data-open", "no");
$(this).hide();
});
$(this).siblings(".customSelectList").show();
$(this).siblings(".customSelectList").attr("data-open", "yes");
$(this).siblings(".customSelectList").children("[data-selected=\"true\"]").css({
background: "RGB(20, 100, 150)",
color: "RGB(255, 255, 255)"
});
}
});
$(".customSelectList").hover(
function () {
$(this).children("[data-selected=\"true\"]").css({
background: "RGB(255, 255, 255)",
color: "RGB(0, 0, 0)"
});
$(this).children("[data-selected=\"true\"]").hover(
function () {
$(this).css({
background: "RGB(20, 100, 150)",
color: "RGB(255, 255, 255)"
});
},
function () {
$(this).css({
background: "RGB(255, 255, 255)",
color: "RGB(0, 0, 0)"
});
}
);
},
function () {
$(this).children("[data-selected=\"true\"]").css({
background: "RGB(20, 100, 150)",
color: "RGB(255, 255, 255)"
});
}
);
$(".customSelectOption").click(function () {
$(this).parent().siblings(".customSelectText").text($(this).text());
$(this).parent().siblings("input").attr("value", $(this).attr("data-value"));
$(this).siblings("[data-selected=\"true\"]").removeAttr("data-selected");
$(this).attr("data-selected", "true");
if ($(this).parent().parent(".customSelect").attr("data-auto-submit") == "yes") {
$(this).parent().parent().parent("form").submit();
}
});
});
CSS
* {
color: RGB(0, 0, 0);
font-family: Arial;
font-size: 14px;
list-style: none;
margin: 0;
padding: 0;
text-decoration: none;
}
body {
padding: 5px;
}
select {
border: 1px solid RGB(150, 150, 150);
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 25px;
padding: 2px;
width: 50px;
}
.customSelect {
background: RGB(255, 255, 255);
float: left;
position: relative;
z-index: 10;
}
.customSelectText {
background: RGB(255, 255, 255);
border: 1px solid RGB(150, 150, 150);
box-sizing: border-box;
-moz-box-sizing: border-box;
cursor: pointer;
height: 25px;
line-height: 23px;
padding-left: 5px;
padding-right: 40px;
position: relative;
text-transform: capitalize;
transition: background 400ms;
user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.customSelect:hover .customSelectText {
background: RGBA(200, 230, 240, 0.4);
box-shadow: inset 0px -12px 2px RGBA(120, 200, 250, 0.2);
}
.customSelectText:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid RGB(0, 0, 0);
content:"";
height: 0;
position: absolute;
right: 5px;
top: 10px;
width: 0;
}
.customSelectList {
background: RGB(255, 255, 255);
border-bottom: 1px solid RGB(150, 150, 150);
border-left: 1px solid RGB(150, 150, 150);
border-right: 1px solid RGB(150, 150, 150);
box-sizing: border-box;
-moz-box-sizing: border-box;
display: none;
overflow: hidden;
position: absolute;
width: 100%;
}
.customSelectOption {
box-sizing: border-box;
-moz-box-sizing: border-box;
cursor: default;
float: left;
font-size: 12px;
height: 20px;
line-height: 20px;
padding-left: 2px;
text-transform: capitalize;
width: 100%;
}
.customSelectOption:hover {
background: RGB(20, 100, 150);
color: RGB(255, 255, 255);
}