css - 如何增加移动开关中的字体大小？

Question

我正在尝试增加开关的尺寸，因为它不够大，无法在一些较小的屏幕上阅读。理想情况下，它的大小会增加一倍左右，但是在某个点之后，文本不会变大。

HTML:

    <div id="switch">
        <select name="flip-min" id="flip-min" data-role="slider">
            <option class="switchTxt" value="off">Images Off</option>
            <option class="switchTxt" value="on">Images On</option>
        </select>
    </div>

CSS:

    #switch {
        position:absolute;
        bottom:1%;
        left:1%;
    }
    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
        display: block;
        padding: 0.9em 75px 0.9em 15px;
    }
    #switch .ui-slider-switch { 

        width:.2em;
        font-size:800px;
    }
    .switchTxt {
        font-size:500px;
    }

http://jsfiddle.net/rAGyC/

Answer 1

DEMO

给定标准开关标记:

<div id="switch">
    <select name="flip-min" id="flip-min" data-role="slider">
        <option class="switchTxt" value="off">Images Off</option>
        <option class="switchTxt" value="on">Images On</option>
    </select>
</div>

CSS 增加了 slider 的大小以允许更大的文本，增加了开关 handle 以适应新的大小，最后增加了字体。 32px 是默认 16px 大小的两倍:

#switch .ui-slider {
    width: 240px;
    height: 60px;
}
#switch .ui-slider-handle {
    width: 40px;
    height: 60px;
    margin: 0;
}
#switch .ui-slider-inneroffset {
    margin: 1px;
    margin-right: 43px;
}
#switch .ui-slider-label { 
    font-size:32px;
}