自定义选择 - 溢出隐藏问题 [英] Custom select - overflow hidden issues

查看：82
本文介绍了自定义选择 - 溢出隐藏问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经设法创建了一个相当不错的自定义选择，它几乎在所有意义上工作（JS需要调整/优化），但我遇到的一个问题，复制一个实际的select元素是当相对父容器设置到 overflow：hidden; 。逻辑告诉我，标准的HTML元素是特殊的，很可能已经设置了覆盖CSS选项的方法，但是我想知道是否有某种形式的黑客，这将允许我复制它与我的自定义选择列表。 p>

EDIT
我要求的解决方案是允许选择显示在父元素 WITH



这里是小提琴： http://jsfiddle.net/8Jfjq/



HTML 

 < div style =height：50px; width：100％：float：left; background：red; overflow：hidden; > 
< div class =customSelectdata-auto-submit =nostyle =float：left; margin-right：20px; z-index：1000;> 
< input class =customSelectInputtype =hiddenname =category>< / input> 
< p class =customSelectText>< / p> 
 
< ul class =customSelectListdata-open =no> 
< li class =customSelectOptiondata-value =1> 1< / li> 
< li class =customSelectOptiondata-value =2> 2< / li> 
< li class =customSelectOptiondata-value =3> 3< / li> 
< li class =customSelectOptiondata-value =4> 4< / li> 
< li class =customSelectOptiondata-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



< pre class =lang-js prettyprint-override> $（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，
（.SelectSelectText）.text（$（this）.text（）。 ））;
if（$（this）.width（）> largestWidth）{
largestWidth = $（this）.parent（）。
}
}）;

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（largestWidth）;
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 ）.attr（data-open）==yes）{
$（this）.siblings（。customSelectList）hide（）;
$（this） .customSelectList）。attr（data-open，no）;
} else {
$（customSelectList ）.attr（data-open，no）;
$（this）.hide（）;
}）;

$（this）.siblings .customSelectList）。show（）;
$（this）.siblings（。customSelectList）。attr（data-open，yes）;
$ （.customSelectList）。children（[data-selected = \true\]）css（{
background：RGB（20，100，150），
颜色：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）.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



< pre class =lang-css prettyprint-override> * {
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-transformation：capitalize;
width：100％;
}

.customSelectOption：hover {
background：RGB（20，100，150）;
color：RGB（255，255，255）;
}


解决方案

c $ c>位置从相对到 absolute 允许在外部看到自定义选择该容器用 overflow：hidden; 属性设置它。但是，这需要您将每个选择的坐标设置为您想要的位置。最好的解决方案是尽可能删除 overflow：hidden;



http://jsfiddle.net/lharby/8Jfjq/2



strong>旧CSS 



  .customSelect {
 background：RGB（255，255，255） 
 float：left; 
 position：relative; 
 z-index：10; 
}

新建CSS 

  .customSelect {
 background：RGB（255，255，255） 
 position：absolute; 
 top：10px; 
 left：10px; 
 z-index：10; 
}


I have managed to create a pretty good custom select, it works in almost every sense (JS needs tweaking/optimizing) but one issue I have come across in terms of replicating an actual select element is when the relative parent container is set to overflow: hidden;. Logic tells me that standard HTML elements are special and have most likely been set up with ways to override CSS options, however I was wondering if there was some form of hack which would allow for me to replicate it with my custom select list.

EDIT The solution I require is allowing the select to show outside the parent element WITH overflow hidden set on the parent element.

Here is the fiddle: 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);
}

解决方案

Changing the value of position from relative to absolute allows the custom select to be seen outside the container with the overflow: hidden; attribute set to it. However, this requires you to set the co-ordinates of each individual select to where you want it to be. The best solution may be to remove overflow: hidden; if possible.

http://jsfiddle.net/lharby/8Jfjq/2

Old CSS

.customSelect {
    background: RGB(255, 255, 255);
    float: left;
    position: relative;
    z-index: 10;
}

New CSS

.customSelect {
    background: RGB(255, 255, 255);
    position: absolute;
    top:10px;
    left:10px;
    z-index: 10;
}

这篇关于自定义选择 - 溢出隐藏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆