darkwiiplayer/BetterSelect
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve webpage

Browse source
This commit is contained in:
Talia 2024-12-18 15:40:19 +01:00
parent edf6d04137
commit 24f6741c0c
Signed by: darkwiiplayer
GPG key ID: 7808674088232B3E
1 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
index.html
View file

@ -15,9 +15,31 @@
url('https://cdn.jsdelivr.net/gh/darkwiiplayer/css@main/schemes/talia.css')
layer(theme);
:root {
--color: #4af;
}
better-select {
color: black;
background: white;
background: var(--background);
&::part(search) {
border-radius: 3px;
border: 1px solid var(--color);
}
&::part(search):focus {
outline: 2px solid color-mix(in hsl, var(--color), transparent 60%);
}
&:focus {
outline: 2px solid var(--color);
}
&:state(--open) {
outline: none;
}
&::part(item):focus {
color: var(--color);
background-color: color-mix(in hsl, var(--color), transparent 80%);
}
}
md-block:not([rendered]) { display: none }
@ -28,12 +50,15 @@
<p>A better muli-option input box for HTML</p>
<better-select class="search">
<span slot="placeholder">Placeholder...</span>
<option value="first">First value</option>
<option value="second">Second value</option>
<option value="third">Third value</option>
</better-select>
<form onsubmit='event.preventDefault(); console.table(Object.fromEntries(new FormData(document.querySelector("form")).entries()))'>
<better-select name="better-selection" class="search">
<span slot="placeholder">Placeholder...</span>
<option value="first">First value</option>
<option value="second">Second value</option>
<option value="third">Third value</option>
</better-select>
<button title="Log form data to dev console">Submit</button>
</form>
<vertical-spacer triple></vertical-spacer>