Custom Style Tags on Azure Devops Sprint Board

On a kanban board you can use custom rules to color the tags.

On a sprint board, custom rules will only color the entire card, not the tags themselves.

(Vote for this feature: Add colored tags to sprint board/backlog - Visual Studio Feedback if you too want to customize the colors of the tags themselves.)

If you can find a way to inject CSS into the board, you can use rules like this to set custom colors for the labels themselves.

Say you want the BLOCKED tag to be fire-engine red. Here is how it's done:

	.tags-items-container[aria-label~='BLOCKED'] .tag-box {background-color:red}

The ~= means "contains the word".

Or, perhaps you have various tags that "start with" a prefix, such as "customer-" -- you can select those tags and style them blue with a rule like this:

	.tags-items-container[aria-label*='Customer'] .tag-box {background-color:blue}

The *= means "contains".

For reference, here's the html they use for the container of the tags, and the tags themselves. This is on a card with two tags, BLOCKED and Customer-Pepsi.

<div class="tags field-container" field="System.Tags">
	<div id="vss_549" class="tfs-tags">
		<div class="tags-items-container" role="toolbar" aria-label="BLOCKED,Customer-Pepsi">
				<li class="tag-item" index="0">
					<span class="tag-container" dir="ltr">
						<span class="tag-box" dir="ltr">BLOCKED</span>
				<li class="tag-item" index="1">
					<span class="tag-container" dir="ltr">
						<span class="tag-box" dir="ltr">Customer-Pepsi</span>

Actually, I see now that my rules would select all tags on a card, even though I only want to highlight the relevant tag.

Unless they improve their html (for example by adding data-tag-name="BLOCKED" onto the .tag-box itself, there's no simple CSS selector that will do it (we can't select by content.)

If I can add custom javascript to the page, I can use the same technique described here: CSS: Select by content (by selecting by attribute value, with help from javascript).

Here's an example of someone with a bunch of "violentmonkey" userscripts: GitHub - alejandro5042/azdo-userscripts: A collection of userscripts to improve the Azure DevOps UI. I assume "violentmonkey" is a modern ancestor of "greasemonkey", a firefox plugin that let you run custom scripts at different domains.

My UserScript

And here's a userscript I made, for a chrome extension called "tampermonkey" which does what I want (for now)

// ==UserScript==
// @name         Azure Devops Tag Colors
// @namespace
// @version      0.1
// @description  Alters the html of the azure devops board, such that you can use Css selectors to color/style the tags on cards
// @author       Leon B
// @match*
// @run-at       document-body
// @icon
// ==/UserScript==

(function() {
	'use strict';

	// Function to add style element
	function addStyle(styles) {
		// Create style document
		var styleElement = document.createElement('style');
		styleElement.type = 'text/css';
		if (styleElement.styleSheet) {
			styleElement.styleSheet.cssText = styles;
		} else {
		// Append style tag to the head

	// create a new element, based on html
	function htmlToElement(html) {
		var template = document.createElement("template");
		html = html.trim(); // Never return a text node of whitespace as the result
		template.innerHTML = html;
		return template.content.firstChild;

	// given an element, insert a sibling after it
	function insertSibling(currentElem, newElem) {
		if (currentElem.nextSibling) {
			currentElem.parentNode.insertBefore(newElem, currentElem.nextSibling);
		} else {

	// this function is called continuously, every few seconds. So any changes it makes have to be idempotent
	function onLoop() {
		// find every tag (unless it has the `lb_altered` class (indicating we've already found it and altered it.)
		for (let tagBox of document.querySelectorAll(".tag-box:not(.lb_altered)")) {
			// add the lb_altered class, so that this element will only be altered/changed one time.

			let tagName = tagBox.innerText;

			if (tagName.length < 100) {
				// this allows us to set style rules such as `.tag-box[data-content="blocked"]::after { content: " ❌";}`
				tagBox.setAttribute('data-content', tagName.toLowerCase());

			// tags starting with 'customer' (and the 'wiki' tag) are given helpful url links to our wiki
			if (tagName.toLowerCase().indexOf("customer") == 0 || tagName.toLowerCase() == "wiki") {
				// if it's not a specific customer tag, then this general url to the customers overview is used.
				let customUrl = "https://intranet/wiki/customers/";

				if (tagName.toLowerCase() == "customer-1") {
					customerUrl = "https://intranet/wiki/customers/customer-1";
				if (tagName.toLowerCase() == "customer-2") {
					customerUrl = "https://intranet/wiki/customers/customer-2";
				if (tagName.toLowerCase() == "wiki") {
					customerUrl = "https://intranet/wiki/";

				let customerLink = htmlToElement(`<a href='${customerUrl}' target='_blank' class='lb_wiki_link' title='Open page about #${tagName} in a new window'>&#10064;</a>`);

		// Special modifications to Card titles happen here
		for (let cardTitleLink of document.querySelectorAll(".clickable-title:not(.lb_altered),.witTitle:not(.lb_altered)")) {
			let cardTitle = cardTitleLink.innerText;

			// We look for numbers in square brackets, with or without a hash at the start
			// and turn them into links in our other system
			if (cardTitle.match(/\[((#)*[0-9]+)\]/)) {
				let idNum = cardTitle.match(/\[(#)*([0-9]+)\]/)[2];
				// Url pattern:
				let supportUrl = `${idNum}`;
				let supportLink = htmlToElement(`<a href='${supportUrl}' target='_blank' title='Open support system #${idNum} in a new window'>[#${idNum}]</a>`);

				// Card titles are shown in a few different places... so rewriting the card title is a little tricky.
				if (cardTitleLink.classList.contains("witTitle")) {
					// unexpanded card... add the link as a sibling
					cardTitleLink.parentNode.insertBefore(supportLink, cardTitleLink);
				} else {
					// normal card... add the link as a young great-aunt.
					cardTitleLink.parentNode.parentNode.insertBefore(supportLink, cardTitleLink.parentNode);
				console.log(`Link for ${idNum}`);
			cardTitleLink.innerText = cardTitle.replace(/\[(#)*([0-9]+)\]/, ' ');// remove the number from the title since it appears in the preceeding link
			// Consider: .replace("URGENT", "πŸ”₯URGENTπŸ”₯");

	// this is called, once only, when the page is first loaded.
	function onceOnly() {
		// Special styles we apply.
		var styles = ' .tag-box[data-content="blocked"]::after { content: " ❌";text-shadow:1px 1px 1px #000;}';
		styles += ' .tag-box[data-content="break-in"] { box-shadow: 0 0 3px red;}';
		styles += ' .tag-box[data-content="break-in"]::after { content: " πŸ’₯";text-shadow:1px 1px 1px #000;}';
		styles += ' .tag-box[data-content*="customer"] { background-color: blue;}';
		styles += ' .tag-box[data-content="wiki"]::after { content: " βž•";text-shadow:1px 1px 1px #000; }';
		styles += ' .tag-box[data-content="wiki"] { background-color: hsl(108deg 52% 60%);color:black;box-shadow:0 0 3px inset black}';
		// Customer specific colors
		styles += ' .tag-box[data-content="customer-1"] { background-color: hsl(172deg 100% 17%);}';
		styles += ' .tag-box[data-content="customer-2"] { background-color: hsl(40deg 96% 61%);color:black;}';
		styles += ' .lb_wiki_link { padding:2px 2px; background-color:#444; font-size:12px; }';


		// And now we set up the loop that will called "onLoop" over and over.
		// this is needed because elements are continually added/removed as you open/close/scroll/interact with the page
		// the loop is only called once every 3 seconds because i don't want to cause performance issues.
		setInterval(function () {
		}, 3000);

	function onReady() {
		// wait a few seconds so the page can load
		setTimeout(function () {
		}, 3000);

	// Start modifying the page once the DOM is ready.
	if (document.readyState !== 'loading') {
	} else {
		document.addEventListener('DOMContentLoaded', onReady);


See also