Instantly share code, notes, and snippets.

Embed
What would you like to do?
QuackQuackQuery Site Search Box - Responsive, Keyboard-Accessible Site Search Box
<div role='search'>
<style>
.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; }
}
</style>
<form class='qqq' action='https://duckduckgo.com/'>
<img src='https://duckduckgo.com/assets/logo_icon60.v101.png' alt=''>
<div>
<input type='hidden' value='https://russelljqa.site/' 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>
</div>
<div>
<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>
</select>
<button type='submit'>Search</button>
</div>
</form>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment