[Hỏi đáp] How add background color on topic prefixes

Question: I got a script for topic prefix that result as shown in below:


And the code is:

Code:

var PREFIJOS_TEMAS = [];

  PREFIJOS_TEMAS.push("[Tutorial]");
  PREFIJOS_TEMAS.push("[Guide]");
  PREFIJOS_TEMAS.push("[Help]");
  PREFIJOS_TEMAS.push("[Off-Topic]");
  PREFIJOS_TEMAS.push("[Games]");
  PREFIJOS_TEMAS.push("[Solved]");
  PREFIJOS_TEMAS.push("[Progress]");
  PREFIJOS_TEMAS.push("[Video]");
  PREFIJOS_TEMAS.push("[Audio]");
  PREFIJOS_TEMAS.push("[Download]");

$(function () {
  if(/^\/post\?f=\d+&mode=newtopic/.test($(location).attr('pathname') + $(location).attr('search'))){ 
      var html_options_prefijo = "<select name='prefijos'><option value=''>--Select--</option>";
      for(var prefijo in PREFIJOS_TEMAS){
        html_options_prefijo += "<option value='" + PREFIJOS_TEMAS[prefijo] + "'>" + PREFIJOS_TEMAS[prefijo] + "</option>";
      }
      html_options_prefijo += "</select>";     
      $('input[name="subject"]').before(html_options_prefijo);       
      $("form[method='post']").submit(function() {
        $('input[name="subject"]').val(($('select[name="prefijos"]').val() ? $('select[name="prefijos"]').val() + " " : "") + $('input[name="subject"]').val());
      });
  }
});

But how can I use background color for every prefixes, that means: for "[Solved]" prefix, it will show green color in background.

Answer: https://devs.forumvi.com/t436-hoi-dap-how-add-background-color-on-topic-prefixes?showpost=p2761

Javascript:

Code:

$(function () {
   $("a[href^='/t'],a[href^='http://"+ location.host +"/t']").html(function () {
      var u = $(this).text();
      if(/^\[([^\[\]]+)\]/.test(u)) return u.replace(/^\[[^\[\]]+\]/, function (a) {
         a = a.slice(1, -1);
         return '<span class="prefix ' + a + '">' + a + "</span>"
      })
   });
});

CSS:

Code:

.prefix{background:#008287;color:#FFF;border-radius:2px;display:inline-block;height:18px;line-height:18px;padding:0 4px}
.prefix.Solved{background:green}
.prefix.Tutorial{background:#16499a}
.prefix.Guide{background:#fa6800}
.prefix.Help{background:#60a917}
/* and more */

solved :)