Jquery元素的Greasemonkey图标、Spinner和Selectmenu不显示

Question

我有一个Greasemonkey脚本，它向网站添加了额外的Jquery元素。到目前为止，一切都很好，但是在旋转菜单和选择菜单上的图标只有在与curosr一起悬停时才能看到。把我的脚本删掉到基本部分，看起来如下所示：

// ==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 );

有了这个脚本，我就可以得到一个旋转器和一个工作正常的SelectMenu元素。唯一的问题是，这些元素的三角形只有在与光标一起悬停时才是可见的。这使得用户很难意识到有一个选择菜单或旋转器。知道我做错了什么吗？我对greasemonkey、javascript、css和html非常陌生。基本上，我试着保持它与this stackoverflow post类似。

Answer 1

我认为用这样的ui-icon修改.css()会更容易一些：

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 + "')");
});