【发布时间】：2015-12-21 04:19:33
【问题描述】：
我制作了一个自定义选择框，它被包裹在一个可滚动的 div 中。
我的问题是：下拉列表占用了包装器的空间。也就是说，它看起来像这样：
但是，我希望它像这样针对父包装器进行修复：
我可以通过从.select_box 中删除position:relative; 来实现此结果。但是，它打破了输入框和列表之间的间距（我不想要），如下所示：
这是我的代码--
HTML：
<div id="wrapper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<br/><br/>
<div class="select_box">
<input type="text" onMouseDown="show_list(this)" onblur="hide_list(this)" readonly/>
<ul style="width:200px;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</div><br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
jQuery：
function show_list(element) {
$(element).next().toggle();
if ($(element).next().css('display') == 'none') $(element).css('background', 'url(select_box_arrow.png) no-repeat 95%');
else $(element).css('background', 'url(select_box_arrow_inverted.png) no-repeat 95%');
}
function hide_list(element) {
$(element).next().hide();
$(element).css('background', 'url(select_box_arrow.png) no-repeat 95%');
}
$(document).ready(function () {
$("div[class='select_box'] input:text").css("padding", "0 10px");
$("div[class='select_box'] li").mousedown(function () {
$(this).parent().prev().attr('value', $(this).text());
});
});
CSS：
#wrapper {
height:200px;
width:400px;
border:Solid 1px;
overflow:auto;
}
/* CSS for customized select box */
.select_box {
display:inline-block;
//position:relative;
}
.select_box input[type="text"] {
width:200px;
height:25px;
border: 1px solid #cccccc;
border-radius:2px;
background:url(select_box_arrow.png) no-repeat 95%;
font-size:15px;
outline:none;
cursor:pointer;
vertical-align:middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.select_box input[type="text"]:focus {
border-color:#FFC59D;
box-shadow:0 0 10px #FFC59D;
}
.select_box ul {
list-style:none;
padding:0;
margin:0;
margin-top:2px;
font-family:Tahoma, Geneva, sans-serif;
line-height:25px;
font-size:15px;
font-weight:normal;
border:solid 1px #FFC59D;
width:220px;
max-height:250px;
overflow:auto;
display:none;
position:absolute;
background:#fff;
color:#000000;
scrollbar-arrow-color: #ff6600;
scrollbar-track-color: #FFC59D;
scrollbar-face-color: #ff6600;
scrollbar-shadow-color: #ff6600;
}
.select_box li {
padding-left:10px;
}
.select_box li:hover {
background:#FF9D5B;
color:#fff;
cursor:default;
}
.select_box ::-webkit-scrollbar {
width: 12px;
border:solid 1px #FFC59D;
border-left-width:2px;
}
.select_box ::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background:#FFC59D;
}
.select_box ::-webkit-scrollbar-thumb:window-inactive {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background:#FFC59D;
}
有没有简单的 CSS 解决方案？我也对通过 jQuery 的解决方案持开放态度。
【问题讨论】：
-
将列表放入正文并使用点击事件定位。附加到正文是避免此类溢出问题的最常见方法
-
@charlietfl 可以试试。但是，这似乎是一个奇怪的解决方法。有没有办法通过简单的css解决这个问题？
-
不，如果它是具有隐藏溢出的元素的后代，则无法告诉浏览器让它其中一些流到外面，而不是其余部分
-
@charlietfl 你不认为我需要用
scroll事件而不是click重新定位列表吗？ -
可能，我认为它就像一个下拉菜单，直到用户点击使用它才会显示
标签： javascript jquery html css css-position