flipswitch上的文字并非全部可见

Question

我正在使用jquerymobile ..

为什么在这个翻转开关上看不到'静音'？并且“取消静音”也不完全可见。

我可以设置翻盖以便所有文字都可见吗？

http://jsfiddle.net/bobbyrne01/0bckxcgm/1/

html ..

<div data-role="header" data-position="fixed">
    <div data-role="controlgroup" data-type="horizontal" class="ui-mini ui-btn-left">
        <select name="flip-3" id="snd-switch" data-role="flipswitch" data-mini="true">
            <option value="Mute">Mute</option>
            <option value="Unmute">Unmute</option>
        </select>
    </div>
     <h1 class="ui-title" role="heading">Title</h1>

</div>

Answer 1

将<select>转换为<input>并添加了其他css ..

http://jsfiddle.net/bobbyrne01/0bckxcgm/4/

html ..

<div data-role="header" data-position="fixed">
    <div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
        <input data-role="flipswitch" name="flip-checkbox-3" id="flip-checkbox-3" data-on-text="Unmute" data-off-text="Mute" data-wrapper-class="custom-size-flipswitch" type="checkbox" />
    </div>
     <h1 class="ui-title" role="heading">Title</h1>

</div>

css ..

/* Custom indentations are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
    text-indent: -5.9em;
}
.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
    text-indent: 0.5em;
}
/* Custom widths are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch {
    width: 8.875em;
}
.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
    padding-left: 7em;
    width: 1.875em;
}
@media (min-width: 28em) {
    // Repeated from rule .ui-flipswitch above
    .ui-field-contain > label + .custom-size-flipswitch.ui-flipswitch {
        width: 1.875em;
    }
}