翻转开关上的文本并非全部可见。

Question

我在用jquerymobile ..。

为什么在这个开关上看不到'Mute‘？“Unmute”也不是完全可见的。

我可以设置翻转使所有文本都可见吗？

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;
    }
}