Question

我已经制作了一个自定义选择框，它包含在一个可滚动的div中。

我的问题是：下拉列表占用了包装器的空间。就是这样：

但是，我希望它可以修改为父包装器，如下所示：

我可以通过从position:relative;删除.select_box来实现此结果。但是，它打破了输入框和列表（我不想要的）之间的间距：

这是我的代码 -

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;
}

Working fiddle.

是否有简单的CSS解决方案？我也通过jQuery开放解决方案。

Answer 1

实现此目标的最简单方法是尽可能使用原生选择框。但是，如果您必须使用输入框的自定义列表，您可以尝试类似下面的示例。

Fiddle（您会看到我在文本输入框旁边添加了原生选择框，以显示其默认工作方式）

<强> HTML

<ul class="list-box" 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 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/>
    <select><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option></select>
    <div class="select_box">
        <input class="list_input" type="text" onMouseDown="show_list(this)" onblur="hide_list(this)" readonly/>
    </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>

<强>的Javascript

function show_list(element) {
    var pos = $(element).offset();
    var input_height = $(element).height();
    $('.list-box').css('top', pos.top + input_height);
    $('.list-box').css('left', pos.left);
    $('.list-box').toggle();
    if ($('.list-box').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");
    $("ul.list-box li").mousedown(function () {
        $('.list_input').attr('value', $(this).text());
        $('.list-box').toggle();
    });

    $('#wrapper').on('scroll', function(){
        var pos = $('.list_input').offset();
        var input_height = $('.list_input').height();
        $('.list-box').css('top', pos.top + input_height);
        $('.list-box').css('left', pos.left);
    });
});

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;
}

对所做更改的快速说明：

如@charlietfl所述，列表需要附加到正文而不是滚动元素内。从那里，我向输入类型文本和列表添加了类，因为父jquery选择器将不再工作，因为它们不是彼此相邻或在同一父容器中。单击输入或滚动#wrapper div时，我将列表放在单击的文本框的正下方。

Answer 2

喜欢这个吗？

您需要在#wrapper之外移动下拉菜单，然后使用javaScript和input[type=text]

计算相对于position: absolute的位置

工作演示： http://jsfiddle.net/4rv4s3ce/10/

希望这有帮助。

如何修复相对父亲的绝对溢出元素的位置？

2 个答案: