Question

当我偶然发现<select>元素的一个非常有趣的行为时，我只是在设计自己的网站（即使从技术上来说不是）。
由于需要在<option>元素中放置样式而不是纯文本，因此我决定使用<select>和<div>来定制我自己的<ul>元素，其中元素包含在样式为overflow:hidden的父对象中。

我试图理解float和overflow属性以及appearance属性的怪癖，但我认为它们都不会对我解决这个问题。< / p>

这里是the link的问题。

正如我所期望的那样，自定义<select>元素未正确显示；但是，无论其父级的<select>属性是否设置为<option>，原始overflow元素的确显示了hidden部分。
因此，我想知道是否有解决此问题的方法？我知道我可以只使用<select>元素，这样我就不会感到费解。但是我只是对此完全有好奇心。非常感谢。

编辑：这是代码：

HTML ：

<div class="top">
  <!-- Custom <select> element -->
  <div class="test_1">
    <!-- Position custom element -->
    <div class="test_padding vertical_middle">
      <!-- Makes both the chooser and the list to have position:relative -->
      <div class="test_rel">
        <!-- Chooser for user to click on -->
        <div class="test_chooser">
          <span>List1</span>
        </div>
        <!--
            Dropdown list that is cropped by overflow:hidden when this list is 
            shown after clicking
        -->
        <ul class="test_list no_margin no_padding">
          <li>List1</li>
          <li>List2</li>
          <li>List3</li>
          <li>List4</li>
          <li>List5</li>
          <li>List6</li>
          <li>List7</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Original <select> element -->
  <div class="test_2">
    <!--
        <option> elements are not cropped on clicking <select> 
        element eventhough it belongs to that element, which is 
        contained inside an element that has overflow:hidden set

        It just as if <option> elements have a fixed position and
        z-index of a very large number, which are not shown through
        developer's tool
    -->
    <select class="vertical_middle">
      <option>Option1</option>
      <option>Option2</option>
      <option>Option3</option>
      <option>Option4</option>
      <option>Option5</option>
      <option>Option6</option>
      <option>Option7</option>
    </select>
  </div>
</div>

CSS

body{background:#222;}
.no_margin{ margin:0; }
.no_padding{ padding:0; }
.vertical_middle{ top:50%; transform:translateY(-50%); }

/*
  The outtermost top navigation that has its property has overflow is set to 
  hidden
*/
.top{
  width:100%;
  height:50px;
  background:#000;
  position:fixed;
  top:0;
  color:#eee;
  overflow:hidden;
}

/*
  First test
  This is a custom made <select> element
*/
.test_1{ float:left; }
/* Padding in order to position the element */
.test_padding{
  height:1.65em;
  position: absolute;
  border:1px solid rgb(169,169,169);
  width:10%;
  left:5%;
}
/*
   Makes every of its child has the position of relative for less pain in 
   seperating the main box and the below list
*/
.test_rel{
  position:relative;
  font-size:1.15em;
}
.test_rel *{ position:inherit; }
/*
  Main box that contains the name of the first value and for user to drop
  down the list below on a click
*/
.test_chooser{
  padding:3px 0 0 3px;
  top:0;
}
/*
   List below for choosing, which should be the same as <option> element.
   Unfortunately, this list is cropped out due to overflow:hidden of its
   parent
*/
.test_list{
  padding:0;
  margin:1px 0 0 2px;
  list-style:none;
 }
.test_list > li{
  padding:3px 0;
  z-index:1000;
}

/*
  Second test which contains the original <select> element
*/
.test_2{ float:right; }
/*
  This <select> element has an unknown quirk that allows its list <option>
  elements to be shown regardless of overflow:hidden that is set by its
  parent when user clicks on it!
*/
.test_2 select{
  position:absolute;
  right:5%;
  width:10vw;
  font-size:1.1em;
  padding:3px;
}

EDIT＃2 因此，为了进一步简化我的问题，有没有一种方法可以使我的自定义元素下面的列表显示出来，而不考虑任何几率（例如overflow:hidden），像原始元素一样？

当其父对象的overflow属性设置为隐藏时，有没有办法模仿<select>元素的行为？

0 个答案: