title: Custom select - overflow hidden issues
body: <p>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 <code>overflow: hidden;</code>. 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.</p>
  
  <p><strong>EDIT</strong>
  The solution I require is allowing the select to show outside the parent element <strong><em>WITH</em></strong> overflow hidden set on the parent element.</p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/8Jfjq/" rel="nofollow">http://jsfiddle.net/8Jfjq/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div style="height: 50px; width: 100%: float: left; background: red; overflow: hidden;"&gt;
      &lt;div class="customSelect" data-auto-submit="no" style="float: left; margin-right: 20px; z-index: 1000;"&gt;
          &lt;input class="customSelectInput" type="hidden" name="category"&gt;&lt;/input&gt;
          &lt;p class="customSelectText"&gt;&lt;/p&gt;
  
          &lt;ul class="customSelectList" data-open="no"&gt;
              &lt;li class="customSelectOption" data-value="1"&gt;1&lt;/li&gt;
              &lt;li class="customSelectOption" data-value="2"&gt;2&lt;/li&gt;
              &lt;li class="customSelectOption" data-value="3"&gt;3&lt;/li&gt;
              &lt;li class="customSelectOption" data-value="4"&gt;4&lt;/li&gt;
              &lt;li class="customSelectOption" data-value="5"&gt;5&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;select style="float: left; height: 25px;"&gt;
          &lt;option value="1"&gt;1&lt;/option&gt;
          &lt;option value="2"&gt;2&lt;/option&gt;
          &lt;option value="3"&gt;3&lt;/option&gt;
          &lt;option value="4"&gt;4&lt;/option&gt;
          &lt;option value="5"&gt;5&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>$(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() &gt; 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() &gt; "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();
          }
      });
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>* {
      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);
  }
  </code></pre>