@itrocks/edit/css/edit.css

Generic action-based object edit form in HTML and JSON

form ul.object.properties li.combobox:has(> input:not(.empty) + input[type=hidden][value=""]) {
  position: relative;
}
form ul.object.properties li.combobox:has(> input: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;
}
form ul.object.properties > li > input {
  border: 1px solid #ddd;
}
form ul.object.properties > li > input[type=checkbox] {
  margin: 8px 0;
}
form ul.object.properties > li > 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 {
  box-sizing: border-box;
  display: inline-block;
  padding: 3px 8px;
  position: relative;
  white-space: pre;
}
form ul.object.properties > li > ul[data-type=objects] > li > input {
  box-sizing: border-box;
  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 {
  margin-left: -8px;
  margin-top: 18px;
}