title: Set text input to focus when I press a button with CSS3
body: <p>I have a search button on the page, and when users press the search button, the search bar comes into the screen and I would also like to set the input to focus as well. Can I do this with pure CSS3?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;input type="checkbox" id="Search_Button" /&gt; &lt;!-- Opens Search Bar --&gt;
  
  &lt;label for="Search_Button"&gt;
      &lt;div id="Search_Container" class="Button_Container"&gt;
          &lt;img src="SVG/Search.svg" class="Button" id="Search" /&gt;
      &lt;/div&gt; 
  &lt;/label&gt;
  </code></pre>
  
  <p>Here you can see the CSS styling so that the search bar is pushed off the screen:</p>
  
  <pre><code>#Search_Box {
      position: absolute; 
      width: 100vw;
      height: 8vh;
      background-color: #38D1A9;
      transform: translate3d(0, -8vh, 0);
      transition: transform .2s ease-out;
  }
  </code></pre>
  
  <p>Here is the search box that drops down:</p>
  
  <pre><code>&lt;div id="Search_Box"&gt;
      &lt;input type="search" name="Search" id="Search_Input" placeholder="Search" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So here is the issue. I have a search icon displayed. When the search icon is pressed, it brings down the "Search_Box" which has the search input inside it. I would like to, when that search icon is pressed, immediately make that search box focused. </p>
  
  <p>The issue with a label technique is that, while it works exactly as intended, the search icon is already inside a label (this label it sits inside is to bring down the search box into view), so I won't be able to wrap it in another label.</p>
  
  <p>I tried to do this:</p>
  
  <pre><code>#Search_Button:checked ~ div #Search_Input {
      cursor: pointer;
  }
  </code></pre>
  
  <p>I tried saying that when the Search_Button was checked, it would bring the search input to focus, but it's definitely not the way to do it. I'm trying to avoid using JS if I can because I'm working on mobile. </p>
  
  <p>I really apologize for any confusion!</p>