CSS 创建没有 <select> 的下拉元素

Question

我正在为表单构建自定义下拉元素，现在正在更改我在此处找到的代码：https://codepen.io/qwertie/pen/QBYMdZ

我希望 li 项目水平放置 space 他们需要的项目。如果我手动将 .cb-item 的 width 设置为 200px 它有点工作，但我希望它自动缩放。

我尝试在 .cb-item 上设置 display: inline-block 和 display: flex。我尝试了 justify-content 中的所有值，但无法让下拉列表中的项目使用每个 li 项目内容的宽度。

我该怎么做？

CSS

/* ------------------------------------------ */
/* ----- combobox / dropdown list styling     */
/* ------------------------------------------ */

.less-sticky {
    border-radius: 10px;
    background-color: red !important;

    max-height: 200px;
    margin-top: 7px;
    background-color: rgb(255, 255, 255);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 10;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    border-width: 0px 1px 1px;
    border-style: solid solid solid;
    border-color: rgb(220, 220, 220) rgb(220, 220, 220) rgb(220, 220, 220);
}

.dropdown {
    /* "relative" and "inline-block" (or just "block") are needed
     here so that "absolute" works correctly in children */
    position: relative;
    display: inline-block;
}

    .dropdown > *:last-child {
        /* Using `display:block` here has two desirable effects:
     (1) Accessibility: it lets input widgets in the dropdown to
         be selected with the tab key when the dropdown is closed. 
     (2) It lets the opacity transition work.
     But it also makes the contents visible, which is undesirable 
     before the list drops down. To compensate, use `opacity: 0`
     and disable mouse pointer events. Another side effect is that
     the user can select and copy the contents of the hidden list,
     but don't worry, the selected content is invisible. */
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s; /* fade out */
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #888;
        background-color: #fff;
        box-shadow: 1px 2px 4px 1px #666;
        box-shadow: 1px 2px 4px 1px #4448;
        z-index: 9999;
        min-width: 100%;
        box-sizing: border-box;
    }
    /* List of situations in which to show the dropdown list.
   - Focus dropdown or non-last child of it => show last-child
   - Focus .downarrow of combobox => show last-child
   - Stay open for focus in last child, unless .less-sticky
   - .sticky last child stays open on hover
   - .less-sticky stays open on hover, ignores focus in last-child */
    .dropdown:focus > *:last-child,
    .dropdown > *:focus ~ *:last-child,
    .dropdown > .less-sticky:last-child:hover {
        display: block;
        opacity: 1;
        transition: 0.15s;
        pointer-events: auto;
    }
/* detect Edge/IE and behave if though less-sticky is on for all
   dropdowns (otherwise links won't be clickable) */
@supports (-ms-ime-align:auto) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}
/* detect IE and do the same thing. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

.dropdown:not(.sticky) > *:not(:last-child):focus,
.dropdown:focus {
    pointer-events: none; /* Causes second click to close */
}

.downarrow:focus {
    outline: 2px solid #8BF; /* Edge/IE can't do outline transparency */
    outline: 2px solid #48F8;
}


/* ------------------------------------------ */
/* ----- Styling for examples                 */
/* ------------------------------------------ */

.cb-item {
    display: block;
    margin: 0px;
    padding: 2px;
    color: #000;
}

    .cb-item:hover, .cb-item:hover > a:visited {
        color: #fff;
        background-color: #88f;
    }

HTML

<div class="dropdown">
    <span tabindex="0">dropdown menu V</span>
    <div class="less-sticky">
        <ul>
          <li class="cb-item"><a href="http://yes.net">home page</a></li>
          <li class="cb-item"><a href="http://test.net">My home page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">fd gddsfgpage</a></li>
          <li class="cb-item"><a href="#">457567456756 757this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
        </ul>
    </div>
</div>

Answer 1

尝试添加这个

ul{
width: max-content;
margin:0;
padding:0;
}

max-content 给出孩子的最大宽度

/* ------------------------------------------ */
/* ----- combobox / dropdown list styling     */
/* ------------------------------------------ */

.less-sticky {
    border-radius: 10px;
    background-color: red !important;

    max-height: 200px;
    margin-top: 7px;
    background-color: rgb(255, 255, 255);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 10;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    border-width: 0px 1px 1px;
    border-style: solid solid solid;
    border-color: rgb(220, 220, 220) rgb(220, 220, 220) rgb(220, 220, 220);
}

.dropdown {
    /* "relative" and "inline-block" (or just "block") are needed
     here so that "absolute" works correctly in children */
    position: relative;
    display: inline-block;
}

    .dropdown > *:last-child {
        /* Using `display:block` here has two desirable effects:
     (1) Accessibility: it lets input widgets in the dropdown to
         be selected with the tab key when the dropdown is closed. 
     (2) It lets the opacity transition work.
     But it also makes the contents visible, which is undesirable 
     before the list drops down. To compensate, use `opacity: 0`
     and disable mouse pointer events. Another side effect is that
     the user can select and copy the contents of the hidden list,
     but don't worry, the selected content is invisible. */
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s; /* fade out */
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #888;
        background-color: #fff;
        box-shadow: 1px 2px 4px 1px #666;
        box-shadow: 1px 2px 4px 1px #4448;
        z-index: 9999;
        min-width: 100%;
        box-sizing: border-box;
    }
    /* List of situations in which to show the dropdown list.
   - Focus dropdown or non-last child of it => show last-child
   - Focus .downarrow of combobox => show last-child
   - Stay open for focus in last child, unless .less-sticky
   - .sticky last child stays open on hover
   - .less-sticky stays open on hover, ignores focus in last-child */
    .dropdown:focus > *:last-child,
    .dropdown > *:focus ~ *:last-child,
    .dropdown > .less-sticky:last-child:hover {
        display: block;
        opacity: 1;
        transition: 0.15s;
        pointer-events: auto;
    }
/* detect Edge/IE and behave if though less-sticky is on for all
   dropdowns (otherwise links won't be clickable) */
@supports (-ms-ime-align:auto) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}
/* detect IE and do the same thing. */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .dropdown > *:last-child:hover {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }
}

.dropdown:not(.sticky) > *:not(:last-child):focus,
.dropdown:focus {
    pointer-events: none; /* Causes second click to close */
}

.downarrow:focus {
    outline: 2px solid #8BF; /* Edge/IE can't do outline transparency */
    outline: 2px solid #48F8;
}


/* ------------------------------------------ */
/* ----- Styling for examples                 */
/* ------------------------------------------ */

.cb-item {
    display: block;
    margin: 0px;
    padding: 2px;
    color: #000;
}

    .cb-item:hover, .cb-item:hover > a:visited {
        color: #fff;
        background-color: #88f;
    }


ul{
width: max-content;
margin:0;
padding:0;
}

<div class="dropdown">
    <span tabindex="0">dropdown menu V</span>
    <div class="less-sticky">
        <ul>
          <li class="cb-item"><a href="http://yes.net">home page</a></li>
          <li class="cb-item"><a href="http://test.net">My home page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
          <li class="cb-item"><a href="#">fd gddsfgpage</a></li>
          <li class="cb-item"><a href="#">457567456756 757this page</a></li>
          <li class="cb-item"><a href="#">Stay on this page</a></li>
        </ul>
    </div>
</div>

Answer 2

在您的情况下，首先您必须设置以下顺序：删除左侧填充 space:

.less-sticky ul {
    padding-left:0;
}

然后

.cb-item {
    min-width: 200px;
 }

将最小宽度添加到指定项目的宽度，然后您必须调整下拉包装：来自

.dropdown > *:last-child {
 min-width: 100%;
}

到

.dropdown > *:last-child {
 width: auto;
}

在标准方式中，宽度是自动的，但您必须按照跨浏览器支持的顺序设置它。主容器始终应包含通用代码，因此从主容器中删除 min-width，然后将其添加到您希望效果发生的项目中，因此将其添加到 cb-item。宽度和最小或最大宽度之间存在一些细微差别，因此它们可能会导致一些错误。我在 codepen 中尝试了你的代码，所以它工作正常，如果需要，请提出任何问题。希望这是有道理的。

Answer 3

试试这个：https://jsfiddle.net/samjco/paxfv1jt/74/

CSS:

        .dd-box{
        border: 1px solid;
        padding: 10px 0 10px 8px;
        margin: 0 !important;
        border-radius: 3px;
        width: 182px !important;
        display: block;
        z-index: 10;
        cursor: pointer;

        }
        .plus{    
        float: right;
        margin-right: 14px;
        vertical-align: middle;
        }

        .less-sticky {
        border-radius: 0px 0px 3px 3px;
        margin-top: -2px;
        z-index: 0;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown > *:last-child {
        display: block;
        opacity: 0;
        pointer-events: none;
        transition: 0.4s;
        position: absolute;
        left: 0;
        top: 100%;
        border: 1px solid #888;
        border-top: 0px;
        background-color: #fff;
        box-shadow: 2px 10px 10px -5px #4444444a;
        min-width: 100%;
        box-sizing: border-box;
        }

            .dropdown:focus > *:last-child,
            .dropdown > *:focus ~ *:last-child,
            .dropdown > .less-sticky:last-child:hover {
                display: block;
                opacity: 1;
                transition: 0.15s;
                pointer-events: auto;
            }

        @supports (-ms-ime-align:auto) {
            .dropdown > *:last-child:hover {
                display: block;
                opacity: 1;
                pointer-events: auto;
            }
        }
        /* detect IE and do the same thing. */
        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
            .dropdown > *:last-child:hover {
                display: block;
                opacity: 1;
                pointer-events: auto;
            }
        }

        .dropdown:not(.sticky) > *:not(:last-child):focus,
        .dropdown:focus {
            pointer-events: none; /* Causes second click to close */
        }

        .downarrow:focus {
            outline: 2px solid #8BF; 
            outline: 2px solid #48F8;
        }



        .cb-item {
        display: block;
        margin: 0px;
        color: #000;
        width: 190px;
        text-align: center;
        }
        a.cb-item {
        color: #000;
        }

            .cb-item:hover, .cb-item:hover > a:visited {
                color: #fff;
                background-color: #eee;
            }

            .cb-item-a{
              padding: 10px 20px;
        border-top: 1px solid;
        display: block;
            color: #000;
            text-decoration: none;
            }


        ul{
        width: max-content;
        margin:0;
        padding:0;
        }

HTML:

<div class="dropdown">
<div class="dd-box" tabindex="0">Select Status <span class="plus"> + </span></div>
    <div class="less-sticky">
        <ul>
          <li class="cb-item"><a class="cb-item-a" href="#">Open</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Revised</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">In Review</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Complete</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Ready</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Assigned</a></li>
          <li class="cb-item"><a class="cb-item-a" href="#">Working</a></li>

        </ul>
    </div>
</div>

CSS 创建没有 <select> 的下拉元素

CSS to create dropdown element without <select>

html

css

html-select

dropdown