Greasemonkey Icons of Jquery UI elements Spinner and Selectmenu do not show

Question

I have a Greasemonkey script that adds additional Jquery UI elements to a website. Everything works fine so far but the icons at the spinner and selectmenu are only visible when hovering over with the curosr. Stripping down my script to the essential parts, it looks like this:

// ==UserScript==
// @name        MyScriptName
// @namespace   MyNameSpace
// @include     *
// @version     1
// @grant       GM_addStyle
// @grant       GM_getResourceText
// @grant       GM_getResourceURL
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @require     https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
// @resource    jqueryUIStyle https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
// @resource    IconSet1  http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/images/ui-icons_222222_256x240.png
// @resource    IconSet2  http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/images/ui-icons_454545_256x240.png
// ==/UserScript==

var iconSet1    = GM_getResourceURL("IconSet1");
var iconSet2    = GM_getResourceURL("IconSet2");
var jqUI = GM_getResourceText("jqueryUIStyle");
jqUI     = jqUI.replace (/url\(images\/ui\-bg_.*00\.png\)/g, "");
jqUI     = jqUI.replace (/images\/ui-icons_222222_256x240\.png/g, iconSet1);
jqUI     = jqUI.replace (/images\/ui-icons_454545_256x240\.png/g, iconSet2);
GM_addStyle(jqUI);

// Div for teamchanges
var teamChoosePanel = document.createElement('div');
teamChoosePanel.innerHTML = '<select id="chooseTeams">'
                                 + '<option selected="selected">A</option>'
                                 + '<option>B</option>'
                                 + '<option>C</option>'
                               + '</select>';
document.body.appendChild(teamChoosePanel);

// Div with walk commands
var numStepSpinnerElement = document.createElement("input");
numStepSpinnerElement.setAttribute("id", "numStepSpinner");
document.body.appendChild(numStepSpinnerElement);

//document.body.appendChild(btn);

// Create team selection
$('#chooseTeams').selectmenu({
  width: 105
});

// Create spinner
$("#numStepSpinner").spinner();
$( "#numStepSpinner" ).spinner( "value", 0 );

With this script I get a Spinner and a SelectMenu element that work just fine. The only problem is that the triangles of these elements are only visible when hovering over with the cursor. This makes it hard for users to realize that there is a selection menu or a spinner. Any idea what I have made wrong? I am rather new to greasemonkey, javascript, css and html. Basically I tried to keep it similar to this stackoverflow post.

Answer 1

I would think it would be easier to just change the ui-icon with .css() like so:

https://jsfiddle.net/Twisty/2u08Lef8/

$(document).ready(function() {
  var teamChoosePanel = $("<div>");
  var iconSet1 = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/images/ui-icons_222222_256x240.png";
  var iconSet2 = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/images/ui-icons_454545_256x240.png";

  teamChoosePanel.html("<select id='chooseTeams'>\r\n<option selected='selected'>A</option>\r\n<option>B</option>\r\n<option>C</option>\r\n</select>");
  $("body").append(teamChoosePanel);

  var numStepSpinnerElement = $("<input>", {
    id: "numStepSpinner"
  });
  $("body").append(numStepSpinnerElement);

  $('#chooseTeams').selectmenu({
    width: "105px"
  });

  // Create spinner
  $("#numStepSpinner").spinner();
  $("#numStepSpinner").spinner("value", 0);

  $(".ui-icon").css("background-image", "url('" + iconSet1 + "')");
});