Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Search bar element test</title>
</head>
<body>
<template id="searchBarTemplate">
<form>
<input type="search" placeholder="" required="required"/>
<div aria-hidden="true"><slot name="placeholder"></slot></div>
<button id="clear-button"
type="reset"
class="button button-flat icon-button"
data-l10n-id="search-bar-clear-button"
hidden="hidden"
tabindex="-1">
<slot name="clear-button"></slot>
</button>
<button id="search-button"
class="button button-flat icon-button">
<slot name="search-button"></slot>
</button>
</form>
</template>
<search-bar label="Search" placeholder="Placeholder">
<span slot="placeholder"></span>
<img slot="search-button" src="chrome://messenger/skin/icons/new/compact/search.svg" alt="Search" />
</search-bar>
</body>
</html>