jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add "arrow" to <select> elements 

Since we are setting "appearance: none" on our <select> elements, the
drop down arrow from the browser is hidden. This arrow doesn't fit in
visually though. This commit adds a new arrow from a simple data url
SVG. Its a dark triangle "pointing" downwards.

Note that we need to set the background to both the gradient and the
image here. Both use the "background-image" property for the graphic,
but since they are positioned differently we must use the general
"background" shorthand.
This commit is contained in:
Samuel Mannehed 2022-11-17 08:34:50 +01:00
parent 4a0999a34e
commit fc5bb6dab6
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/styles/input.css
View File

@ -66,9 +66,23 @@ button {
}
select {
padding-right: 7px;
--select-arrow: calc(100% - 7px) no-repeat 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"> \
<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>');
background: var(--select-arrow),
linear-gradient(to top, rgb(255, 255, 255), rgb(240, 240, 240));
padding-right: calc(2*7px + 8px);
padding-left: 7px;
}
:root:not(.noVNC_touch) select:hover:not(:disabled) {
background: var(--select-arrow),
linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
}
option {
color: black;
background: white;
@ -137,7 +151,6 @@ select:active {
:root:not(.noVNC_touch) input[type=color]:hover:not(:disabled),
:root:not(.noVNC_touch) input[type=reset]:hover:not(:disabled),
:root:not(.noVNC_touch) input[type=submit]:hover:not(:disabled),
:root:not(.noVNC_touch) button:hover:not(:disabled),
:root:not(.noVNC_touch) select:hover:not(:disabled) {
:root:not(.noVNC_touch) button:hover:not(:disabled) {
background: linear-gradient(to top, rgb(255, 255, 255), rgb(250, 250, 250));
}