select

Better select widgets in vanilla javascript.  https://p.ce9e.org/select/demo/
git clone https://git.ce9e.org/select.git

commit
94b0a932cec05d00bfe5931151f03f7612ec669e
parent
2a7bb990d8b762a766ac82758a5ae196f911de97
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2023-08-09 04:54
css: flow relative

Diffstat

M select.css 25 +++++++++++++------------

1 files changed, 13 insertions, 12 deletions


diff --git a/select.css b/select.css

@@ -3,7 +3,7 @@
    3     3 }
    4     4 
    5     5 .select > input {
    6    -1 	width: 100%;
   -1     6 	inline-size: 100%;
    7     7 	box-sizing: border-box;
    8     8 }
    9     9 
@@ -20,15 +20,14 @@
   20    20 	font: -moz-field;
   21    21 	border: 1px solid Field;
   22    22 	outline: 1px solid ThreeDShadow;
   23    -1 	border-top: 0;
   24    -1 	left: 0;
   25    -1 	right: 0;
   -1    23 	border-block-start: 0;
   -1    24 	inset-inline: 0;
   26    25 	overflow-y: auto;
   27    26 
   28    -1 	/* line-height and height are chosen so that the last line is only */
   -1    27 	/* line-height and block-size are chosen so that the last line is only */
   29    28 	/* half visible (to indivate that there is more below) */
   30    29 	line-height: 1.2;
   31    -1 	max-height: 10.4em;
   -1    30 	max-block-size: 10.4em;
   32    31 }
   33    32 .select__dropdown:empty {
   34    33 	display: none;
@@ -37,7 +36,8 @@
   37    36 .select__dropdown [role="option"],
   38    37 .select__dropdown strong {
   39    38 	display: block;
   40    -1 	padding: 0.2em 0.4em;
   -1    39 	padding-block: 0.2em;
   -1    40 	padding-inline: 0.4em;
   41    41 	white-space: nowrap;
   42    42 	overflow: hidden;
   43    43 	text-overflow: ellipsis;
@@ -61,7 +61,7 @@
   61    61 	padding: 0;
   62    62 }
   63    63 .select__dropdown ul [role="option"] {
   64    -1 	padding-left: 2em;
   -1    64 	padding-inline-start: 2em;
   65    65 }
   66    66 
   67    67 .select__input {
@@ -81,12 +81,13 @@
   81    81 	display: inline-block;
   82    82 	position: relative;
   83    83 	z-index: 1;  /* on top of input */
   84    -1 	margin: 0.1em 0.2em;
   -1    84 	margin-block: 0.1em;
   -1    85 	margin-inline: 0.2em;
   85    86 	margin-inline-start: 0;
   86    87 	cursor: default;
   87    88 }
   88    89 .select__value {
   89    -1 	padding: 0 0.2em;
   -1    90 	padding-inline: 0.2em;
   90    91 	background: rgba(128,128,128,.3);
   91    92 	color: FieldText;
   92    93 	border: 1px solid ThreeDShadow;
@@ -94,8 +95,8 @@
   94    95 }
   95    96 
   96    97 .select__measure {
   97    -1 	width: 0;
   98    -1 	height: 0;
   -1    98 	inline-size: 0;
   -1    99 	block-size: 0;
   99   100 	overflow: hidden;
  100   101 	white-space: pre;
  101   102 }