Skip to content

Instantly share code, notes, and snippets.

@pbuzdin

pbuzdin/index.html

Created August 1, 2021 21:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbuzdin/cc1fc52ab2a8dbccc1a5d83d0486a86f to your computer and use it in GitHub Desktop.
Save pbuzdin/cc1fc52ab2a8dbccc1a5d83d0486a86f to your computer and use it in GitHub Desktop.
Download ZIP
custom dropdown without javascript // source https://jsbin.com/vigacav
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>custom dropdown without javascript</title>
<style id="jsbin-css">
body {
background-color: rgb(1,1,1);
height: 100vh;
font-family: sans-serif;
padding: 5rem;
}
details {
position: relative;
width: 300px;
}
details[open] {
z-index: 1;
}
details[open] summary:before {
content: '';
display: block;
width: 100vw;
height: 100vh;
background: transparent;
position: fixed;
top: 0;
left: 0;
}
summary {
cursor: pointer;
background-color: cyan;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary:after {
content: '';
float: right;
width: .5rem;
height: .5rem;
border-bottom: 1px solid currentColor;
border-left: 1px solid currentColor;
border-bottom-left-radius: 2px;
transform: rotate(135deg) translate(100%, 0%);
transform-origin: center center;
transition: transform .4s;
background: coral;
}
summary:focus {
outline: none;
}
details[open] summary:after {
transform: rotate(-45deg) translate(-100%, 0%);}
.list {
width: 100%;
position: absolute;
max-height: 500px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.radios input {
pointer-events: none;
}
input[type=radio] {
appearance: none;
-webkit-appearance: none; /* safari hui sasari */
display: none;
}
input[type=radio]:checked {
display: inline-block;
background: coral;
}
input[type=radio]:after {
content: attr(title);
display: inline-block;
}
label {
width: 100%;
background: pink;
cursor: pointer;
}
</style>
</head>
<body>
<details class="custom-select">
<summary class="radios">
<input type="radio" name="item" id="default" title="Auswählen..." checked>
<input type="radio" name="item" id="item1" title="Item 1">
<input type="radio" name="item" id="item2" title="Item 2">
<input type="radio" name="item" id="item3" title="Item 3">
<input type="radio" name="item" id="item4" title="Item 4">
<input type="radio" name="item" id="item5" title="Item 5">
</summary>
<div class="list">
<label for="item1">Item 1</label>
<label for="item2">Item 2</label>
<label for="item3">Item 3</label>
<label for="item4">Item 4</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
<label for="item5">Item 5</label>
</div>
</details>
<script id="jsbin-source-css" type="text/css">
body {
background-color: rgb(1,1,1);
height: 100vh;
font-family: sans-serif;
padding: 5rem;
}
details {
position: relative;
width: 300px;
}
details[open] {
z-index: 1;
}
details[open] summary:before {
content: '';
display: block;
width: 100vw;
height: 100vh;
background: transparent;
position: fixed;
top: 0;
left: 0;
}
summary {
cursor: pointer;
background-color: cyan;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary:after {
content: '';
float: right;
width: .5rem;
height: .5rem;
border-bottom: 1px solid currentColor;
border-left: 1px solid currentColor;
border-bottom-left-radius: 2px;
transform: rotate(135deg) translate(100%, 0%);
transform-origin: center center;
transition: transform .4s;
background: coral;
}
summary:focus {
outline: none;
}
details[open] summary:after {
transform: rotate(-45deg) translate(-100%, 0%);}
.list {
width: 100%;
position: absolute;
max-height: 500px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.radios input {
pointer-events: none;
}
input[type=radio] {
appearance: none;
-webkit-appearance: none; /* safari hui sasari */
display: none;
}
input[type=radio]:checked {
display: inline-block;
background: coral;
}
input[type=radio]:after {
content: attr(title);
display: inline-block;
}
label {
width: 100%;
background: pink;
cursor: pointer;
}</script>
</body>
</html>
Raw
jsbin.vigacav.css
body {
background-color: rgb(1,1,1);
height: 100vh;
font-family: sans-serif;
padding: 5rem;
}
details {
position: relative;
width: 300px;
}
details[open] {
z-index: 1;
}
details[open] summary:before {
content: '';
display: block;
width: 100vw;
height: 100vh;
background: transparent;
position: fixed;
top: 0;
left: 0;
}
summary {
cursor: pointer;
background-color: cyan;
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary:after {
content: '';
float: right;
width: .5rem;
height: .5rem;
border-bottom: 1px solid currentColor;
border-left: 1px solid currentColor;
border-bottom-left-radius: 2px;
transform: rotate(135deg) translate(100%, 0%);
transform-origin: center center;
transition: transform .4s;
background: coral;
}
summary:focus {
outline: none;
}
details[open] summary:after {
transform: rotate(-45deg) translate(-100%, 0%);}
.list {
width: 100%;
position: absolute;
max-height: 500px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.radios input {
pointer-events: none;
}
input[type=radio] {
appearance: none;
-webkit-appearance: none; /* safari hui sasari */
display: none;
}
input[type=radio]:checked {
display: inline-block;
background: coral;
}
input[type=radio]:after {
content: attr(title);
display: inline-block;
}
label {
width: 100%;
background: pink;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment