@itrocks/edit/css/edit.css

Generic action-based object edit form in HTML and JSON

form ul.object.properties li:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty)),
.property:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty)) {
  position: relative;
}
form ul.object.properties li:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty)) > input.autocomplete,
.property:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty)) > input.autocomplete {
  anchor-name: --add-after;
}
form ul.object.properties li:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty))::after,
.property:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty))::after {
  background: url("add.svg");
  content: "";
  cursor: pointer;
  display: inline-block;
  height: 15px;
  position: absolute;
  top: -7px;
  width: 15px;
  z-index: 1;
}
form ul.object.properties li:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty))[data-property]::after,
.property:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty))[data-property]::after {
  left: anchor(--ac right);
  transform: translate(-7px, 0);
}
form ul.object.properties li:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty)):not([data-property])::after,
.property:has(> input[name$=_id][type=hidden][value=""] + input.autocomplete:not(.empty)):not([data-property])::after {
  right: -7px;
}

form ul.object.properties > li > input[type=checkbox],
.property > input[type=checkbox] {
  margin: 8px 0;
}
form ul.object.properties > li > table,
.property > table {
  margin: 4px 5px;
}
form ul.object.properties > li > ul[data-type=objects],
.property > ul[data-type=objects] {
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
}
form ul.object.properties > li > ul[data-type=objects] > li,
.property > ul[data-type=objects] > li {
  display: inline-block;
  padding: 3px 8px;
  position: relative;
  white-space: pre;
}
form ul.object.properties > li > ul[data-type=objects] > li > .autocomplete,
.property > ul[data-type=objects] > li > .autocomplete {
  left: 0;
  padding-bottom: 2px;
  padding-top: 2px;
  position: absolute;
  top: 0;
  width: 100%;
}
form ul.object.properties > li > ul[data-type=objects] > li > .suggestions,
.property > ul[data-type=objects] > li > .suggestions {
  margin-left: -8px;
  margin-top: 18px;
}

.property + .action {
  padding: 0.5em 0.5em 0.5em 26px;
}