QuackQuackQuery Site Search Box - Responsive, Keyboard-Accessible Site Search Box

QuackQuackQuery-SiteSearchBox.html

<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>