Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
QuackQuackQuery Site Search Box - Responsive, Keyboard-Accessible Site Search Box
<div role='search'>
.qqq img { float: left; margin-right: 5px; }
.qqq input { margin-bottom: 5px; }
@media screen and (max-width: 499px) {
.qqq img { display: none; }
.qqq input { width: 100%; }
@media screen and (min-width: 500px) {
.qqq input { width: calc(100% - 77px); }
.qqq input, .qqq select, .qqq button { padding: 4px; }
<form class='qqq' action=''>
<img src='' alt=''>
<input type='hidden' value='' name='sites'></input>
<input type='hidden' value='1' name='kac'></input>
<input type='hidden' value='-1' name='kc'></input>
<input type='hidden' value='1' name='kh'></input>
<input type='hidden' value='1' name='kn'></input>
<input type='hidden' value='1' name='kp'></input>
<input class='qqq' type='search' placeholder="Search this site" name='q' aria-label="Search terms to search this site for"></input>
<label for='df'>Time period to search:</label>
<select name='df' id='df'>
<option value='' >Any Time</option>
<option value='d'>Past Day</option>
<option value='w'>Past Week</option>
<option value='m'>Past Month</option>
<button type='submit'>Search</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.