Skip to content

Instantly share code, notes, and snippets.

@jacobp100

jacobp100/input-dropdown.html

Created January 24, 2018 21:33
Show Gist options
  • Save jacobp100/277574dfa1b7c30a382741a330079af3 to your computer and use it in GitHub Desktop.
Save jacobp100/277574dfa1b7c30a382741a330079af3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
input-dropdown.html
<!doctype html>
<title>Dropdown</title>
<style>
input {
box-sizing: border-box;
width: 200px;
}
.options {
width: 200px;
background: grey;
clip-path: inset(0 0 100%);
visibility: collapse;
transition-duration: 300ms;
}
input:focus ~ .options {
clip-path: inset(0);
visibility: visible;
}
</style>
<input />
<div class="options">
<div>Option 1</div>
<div>Option 2</div>
<div>Option 3</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment