Значок данных в радиокнопке jquery-mobile

Question

Я пытаюсь заменить текст моих радиокнопок на некоторые значки из data-icons в jquery mobile. Мой код такой и на jsfiddle

<div data-role="page">
    <div data-role="content">
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup"><legend>Choose a direction:</legend>
                <input type="radio" name="1" id="1" value="1" />
                <label for="1">Up</label>
                <input type="radio" name="1" id="2" value="2" />
                <label for="2">Down</label>
            </fieldset>
        </div>
    </div>
</div>

Я хочу заменить 'вверх' на data-icon="arrow-u", а "down" на data-icon = "arrow-d". Этот ответ показывает, как заменить внешнее изображение, но как насчет значков данных?

Answer 1

Вот рабочий пример: http://jsfiddle.net/Gajotres/wL2gQ/

Я надеюсь, что это то, что вы хотели.

HTML:

<div data-role="page" id="radio-icons"> 
    <div data-role="content"> 
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
                <label for="radio-choice-1" ><div id="custom-label"><span class="ui-icon ui-icon-bars ui-icon-shadow up">&nbsp;</span></div></label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2"  />
                <label for="radio-choice-2"><div id="custom-label"><span class="ui-icon ui-icon-bars ui-icon-shadow down">&nbsp;</span></div></label>
            </fieldset>
        </div>
    </div>
</div>

CSS:

#custom-label {
    width: 18px;    
    height: 18px;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("images/icons-18-white.png");
    background-repeat: no-repeat;
    border-radius: 9px 9px 9px 9px;  
}

#custom-label span {
    left: 45px !important;
    margin-top: -7px;
}

#custom-label span.up {
    background-position: -180px -1px !important;    
}

#custom-label span.down {
    background-position: -216px -1px !important;    
}