stars.css

.star {
  margin-left: 2px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTI5IDEyOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTI5IDEyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBvcGFjaXR5PSIwLjU3IiBzdHJva2U9IiMwMDAwMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiBwb2ludHM9IjY1LjEsNi41IDg0LDQ0LjggMTI2LjMsNTAuOSA5NS43LDgwLjcgMTAyLjksMTIyLjggDQoJNjUuMSwxMDMgMjcuMywxMjIuOCAzNC41LDgwLjcgMy45LDUwLjkgNDYuMiw0NC44ICIvPg0KPHBvbHlnb24gZmlsbD0iI0E4QThBOCIgc3Ryb2tlPSIjNUI1QjVCIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcG9pbnRzPSI2Mi43LDEuNSANCgk4MS42LDM5LjggMTIzLjksNDUuOSA5My4zLDc1LjggMTAwLjUsMTE3LjkgNjIuNyw5OCAyNC45LDExNy45IDMyLjEsNzUuOCAxLjUsNDUuOSA0My44LDM5LjggIi8+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjQjdCN0I3IiBkPSJNNDcuOCw0NC4zYzAsMC0yNC45LDMuNi0zMy40LDQuOGM2LjIsNiwyNC4xLDIzLjUsMjQuMSwyMy41cy00LjIsMjQuODAxLTUuNywzMy4yDQoJCWM3LjYtNCwyOS44LTE1LjcsMjkuOC0xNS43czIyLjIsMTEuNywyOS44LDE1LjdjLTEuNS04LjUtNS43LTMzLjItNS43LTMzLjJzMTgtMTcuNSwyNC4xLTIzLjVjLTguNS0xLjItMzMuMzk5LTQuOC0zMy4zOTktNC44DQoJCVM2Ni41LDIxLjgsNjIuNywxNC4xQzU4LjksMjEuOCw0Ny44LDQ0LjMsNDcuOCw0NC4zeiIvPg0KPC9nPg0KPC9zdmc+DQo=");
}

.stars {
  display: inline;
  cursor: pointer;
}

.stars.disabled {
  cursor: auto;
}

.star.highlight {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgWw0KCTwhRU5USVRZIG5zX2Zsb3dzICJodHRwOi8vbnMuYWRvYmUuY29tL0Zsb3dzLzEuMC8iPg0KCTwhRU5USVRZIG5zX3N2ZyAiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KCTwhRU5USVRZIG5zX3hsaW5rICJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCl0+DQo8c3ZnICB2ZXJzaW9uPSIxLjEiIHhtbG5zPSImbnNfc3ZnOyIgeG1sbnM6eGxpbms9IiZuc194bGluazsiIHhtbG5zOmE9Imh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVTVkdWaWV3ZXJFeHRlbnNpb25zLzMuMC8iDQoJIHZpZXdCb3g9Ii0wLjcgLTAuMiAxMjkgMTI5IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC0wLjcgLTAuMiAxMjkgMTI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxkZWZzPg0KPC9kZWZzPg0KPHBvbHlnb24gb3BhY2l0eT0iMC41NyIgc3Ryb2tlPSIjMDAwMDAwIiBwb2ludHM9IjY1LjEsNi41IDg0LDQ0LjggMTI2LjMsNTAuOSA5NS43LDgwLjcgMTAyLjksMTIyLjggNjUuMSwxMDMgMjcuMywxMjIuOCANCgkzNC41LDgwLjcgMy45LDUwLjkgNDYuMiw0NC44ICIvPg0KPHBvbHlnb24gZmlsbD0iI0ZGRDQzMSIgc3Ryb2tlPSIjQkYwMDAwIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgcG9pbnRzPSI2Mi43LDEuNSANCgk4MS42LDM5LjggMTIzLjksNDUuOSA5My4zLDc1LjggMTAwLjUsMTE3LjkgNjIuNyw5OCAyNC45LDExNy45IDMyLjEsNzUuOCAxLjUsNDUuOSA0My44LDM5LjggIi8+DQo8Zz4NCgk8bGluZWFyR3JhZGllbnQgaWQ9IlhNTElEXzFfIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjYyLjY3NjgiIHkxPSIxNC4wNTc2IiB4Mj0iNjIuNjc2OCIgeTI9IjEwNS44OTc5Ij4NCgkJPHN0b3AgIG9mZnNldD0iMCIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRiIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZEQjAwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1hNTElEXzFfKSIgZD0iTTQ3LjgsNDQuM2MwLDAtMjQuOSwzLjYtMzMuNCw0LjhjNi4yLDYsMjQuMSwyMy41LDI0LjEsMjMuNXMtNC4yLDI0LjgtNS43LDMzLjINCgkJYzcuNi00LDI5LjgtMTUuNywyOS44LTE1LjdzMjIuMiwxMS43LDI5LjgsMTUuN2MtMS41LTguNS01LjctMzMuMi01LjctMzMuMnMxOC0xNy41LDI0LjEtMjMuNWMtOC41LTEuMi0zMy40LTQuOC0zMy40LTQuOA0KCQlTNjYuNSwyMS44LDYyLjcsMTQuMUM1OC45LDIxLjgsNDcuOCw0NC4zLDQ3LjgsNDQuM3oiLz4NCjwvZz4NCjwvc3ZnPg0K");
}

.star:first-child {
  margin-left: 0px;
}