title: Custom CSS dropdown to focus on dropdown elements
body: <p>I am trying to get the dropdown elements to focus while the list is in open state using CSS. Right now, the autofocus only selects the All, then closes the list dropdown.  I want it to focus on cheese in an open state and focus tab through Toast and any components that could be after. I have tried placing tabIndex on each element, but the list dropdown closes so I don't see the focus.</p>
  <p>Please, see <a href="https://codesandbox.io/s/heuristic-thunder-0xii6?file=/src/App.js" rel="nofollow noreferrer">CodeSandBox here</a>.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.select-box {
    position: relative;
    display: block;
    width: 100%;
    height: 48px;
    margin: 0 auto;
  }
  
  .select-box-current:hover {
    border: 1px solid #D4D4D4;
  }
  
  .select-box-current:focus {
    box-shadow: 0 0 4px 2px #8CB6FD, 0 1px 3px 0 rgba(102, 102, 102, 0.1), 0 1px 3px 0 rgba(102, 102, 102, 0.2);
  }
  
  .select-box-current {
    position: relative;
    cursor: pointer;
    outline: none;
  }
  
  .select-box-current:focus+.select-box-list {
    opacity: 1;
    animation-name: none;
  }
  
  .select-box-current:focus+.select-box-list .select-box-option {
    cursor: pointer;
  }
  
  .select-box-value {
    display: flex;
  }
  
  .select-box-input {
    display: none;
  }
  
  .select-box-input:checked+.select-box-input-text {
    display: block;
  }
  
  .select-box-input-text {
    display: none;
    width: 100%;
    margin: 0;
    padding: 15px;
    background-color: #fff;
  }
  
  .select-box-list {
    position: absolute;
    width: 100%;
    padding: 0;
    margin-top: 8px;
    margin-bottom: 8px;
    list-style: none;
    opacity: 0;
    animation-name: HideList;
    animation-duration: 0.5s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    animation-timing-function: step-start;
    background-color: #FFFFFF;
  }
  
  .select-box-option {
    display: block;
    padding: 15px;
    background-color: #fff;
  }
  
  .select-box-option:hover {
    background-color: rgba(102, 102, 102, 0.05);
  }
  
  .select-box-option:focus {
    background-color: rgba(102, 102, 102, 0.05);
    box-shadow: 0 0 4px 2px #8CB6FD;
  }
  
  @keyframes HideList {
    from {
      transform: scaleY(1);
    }
    to {
      transform: scaleY(0);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="select-box"&gt;
    &lt;div className="select-box-current" tabIndex="0" autoFocus={true}&gt;
      &lt;div className="select-box-value"&gt;
        &lt;input className="select-box-input" type="radio" id={0} value="all" name="Ben" defaultChecked /&gt;
        &lt;p className="select-box-input-text"&gt;
          All
        &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div key={idx} className="select-box-value"&gt;
        &lt;input className="select-box-input" type="radio" id={1} value="Cheese" name="Ben" /&gt;
        &lt;p className="select-box-input-text"&gt;
          Cheese
        &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div className="select-box-value"&gt;
        &lt;input className="select-box-input" type="radio" id={2} value="Toast" name="Ben" /&gt;
        &lt;p className="select-box-input-text"&gt;
          Toast
        &lt;/p&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;ul className="select-box-list"&gt;
      &lt;li&gt;
        &lt;label className="select-box-option" htmlFor={0} aria-hidden={false}&gt;
                              All
                          &lt;/label&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;label className="select-box-option" htmlFor={1} aria-hidden={false}&gt;
                                  Cheese
                              &lt;/label&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
        &lt;label className="select-box-option" htmlFor={2} aria-hidden={false}&gt;
                                  Toast
                              &lt;/label&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>