@itrocks/edit/css/edit.css

Generic action-based object edit form in HTML and JSON

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

form ul.object.properties > li > input,
.property > input {
  border: 1px solid #ddd;
}
form ul.object.properties > li > input[type=checkbox],
.property > input[type=checkbox] {
  margin: 8px 0;
}
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;
}