html - 编辑阴影图标颜色/Jquery Mobile

Question

我正在使用 HTML5/CSS/JS 构建移动应用程序。我有一个带有星形图标的按钮:

 <a href="#fav" data-icon="star" data-role="button">Favorites</a>

到目前为止一切顺利。

问题是作为图标背景创建的丑陋阴影。我想要的是将这个灰色阴影的颜色更改为#ffcb04。

到目前为止我已经尝试过:

a.ui-icon-star{
    background-color: #ffcb04 !important;
}  /* This changes the color of the entire button */

和

/*This changes the color of star itself */
ui-icon-star:after{background-image:url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23ffcb04%3B%22%20points%3D%2214%2C5%209%2C5%207%2C0%205%2C5%200%2C5%204%2C8%202.625%2C13%207%2C10%2011.375%2C13%2010%2C8%20%22%2F%3E%3C%2Fsvg%3E")}

还有其他想法吗？

Answer 1

a.ui-icon-star:after{
    background-color: #ffcb04 !important;
}  

DEMO