How do you style the “remove tag/property” icon?

[thoroughburro]

I’m customizing my metadata display using CSS snippets. It’s going well, but I can’t find a way to remove or style the “x” delete property icon. Everything else, I’ve found at the metadata and tag variable references.

Current snippet:

body {
  --tag-size: var(--metadata-input-font-size) !important;
  --tag-color: var(--metadata-label-text-color) !important;
  --metadata-input-text-color: var(--metadata-label-text-color) !important;
  --tag-color-hover: var(--metadata-input-text-color-hover) !important;
  --tag-background: var(--metadata-property-background) !important;
  --tag-background-hover: var(--metadata-property-background-hover) !important;
  --tag-padding: var(--metadata-property-padding) !important;
  --tag-radius: var(--metadata-property-radius) !important;
  --metadata-divider-color: transparent !important;
  --metadata-gap: 0 !important;
  --metadata-padding: 0 !important;
}

.metadata-properties-heading, .metadata-add-button {
    display: none;
}

.metadata-container {
    margin-block-end: 0;
}

Current output:

Anyone know how to remove the “x” buttons to the right of each property? Thanks!

[ariehen]

You could try either:

/* make the 'x' transparent for Property values */
.metadata-properties .multi-select-pill svg.svg-icon {
    color: transparent;
}

or

/* remove the 'x' and the space it takes up for Property values */
.metadata-properties .multi-select-pill svg.svg-icon {
    display: none;
}

Note: if you use the display: none version, you’ll have to switch to Source mode to remove any values.

// moved to Custom CSS

[thoroughburro]

Thank you for taking the time! That works perfectly. The second form is what I wanted, as I prefer to make all changes in Source mode.

[ariehen]

Great!

Enjoy the flowers.