mediawiki-skins-Citizen/templates/SearchBox.mustache

{{!
	string msg-citizen-search-toggle-shortcut message with shortcut key for search toggle
	string msg-citizen-search-toggle tooltip message for search toggle
	string form-action action attribute of the search form
	string page-title page title of the search page
	string msg-search search text label
	string html-input raw HTML containing the input box of the search box
	string html-random-href URL of Special:Random
	string msg-random tooltip message for random page button
}}
<input
	type="checkbox" 
	id="search-checkbox" 
	class="mw-checkbox-hack-checkbox">
<label
	id="search-toggle" 
	class="mw-checkbox-hack-button mw-header-button" 
	for="search-checkbox"
	role="button" 
	title="{{msg-citizen-search-toggle-shortcut}}"
	aria-controls="searchform">
	{{msg-citizen-search-toggle}}
</label>
<div id="search-toggle-icon">
	<div id="search-toggle-icon-1" class="search-toggle-icon-div"></div>
	<div id="search-toggle-icon-2" class="search-toggle-icon-div"></div>
	<div id="search-toggle-icon-3" class="search-toggle-icon-div"></div>
</div>
<form action="{{form-action}}" role="search" id="searchform" autocomplete="off">
	<input type="hidden" name="title" value="{{page-title}}">
	<label class="screen-reader-text" for="searchInput">{{msg-search}}</label>
	<div id="searchform-icon"></div>
	{{{html-input}}}
	<a
		id="searchform-random" 
		href="{{html-random-href}}"
		title="{{msg-random}}">
		<div id="searchform-random-label" class="screen-reader-text">
			{{msg-random}}
		</div>
	</a>
</form>