From 24f6741c0ccbb89aebf7d2da6fec25440efe549c Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Wed, 18 Dec 2024 15:40:19 +0100
Subject: [PATCH] Improve webpage

---
 index.html | 41 +++++++++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index fc50a85..52b0c61 100644
--- a/index.html
+++ b/index.html
@@ -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>