diff options
author | Samuel Mannehed <samuel@cendio.se> | 2022-12-12 13:54:30 +0100 |
---|---|---|
committer | Samuel Mannehed <samuel@cendio.se> | 2022-12-12 15:31:00 +0100 |
commit | 3cf2bb9b5938fe61a7914704bbcd354a4eaa956c (patch) | |
tree | dc3756cc9333066ae899f0cb5d943ef0f533b147 /app | |
parent | 80897091e08f94661370396de936ba91655da870 (diff) | |
download | novnc-3cf2bb9b5938fe61a7914704bbcd354a4eaa956c.tar.gz |
Change arrow direction of active select button
When the select-dropdown is open, let's use an arrow pointing upwards
isntead. Note that we can't easily animate the change in
background-image.
Diffstat (limited to 'app')
-rw-r--r-- | app/styles/input.css | 11 |
1 files changed, 10 insertions, 1 deletions
diff --git a/app/styles/input.css b/app/styles/input.css index cc4087c..8ea38c2 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -83,7 +83,16 @@ select { padding-right: calc(2*7px + 8px); padding-left: 7px; } - +select:active { + /* Rotated arrow */ + --select-arrow: url('data:image/svg+xml;utf8, \ + <svg width="8" height="6" version="1.1" viewBox="0 0 8 6" \ + xmlns="http://www.w3.org/2000/svg" transform="rotate(180)" > \ + <path d="m6.5 1.5 -2.5 3 -2.5 -3 5 0" stroke-width="3" \ + stroke="rgb(31,31,31)" fill="none" \ + stroke-linecap="round" stroke-linejoin="round" /> \ + </svg>'); +} option { color: black; background: white; |