下拉菜单中的低分辨率显示,其中包含大量字符

时间:2015-01-28 10:27:42

标签: html css

我有一个下拉菜单,允许用户选择字体大小,和 每个尺寸以其代表的大小显示为“实时”。

我的代码工作正常,但不幸的是,关闭菜单的初始显示效果不佳, 它看起来很模糊,“低分辨率”(见下图)。我该如何解决这个问题?

enter image description here

我的代码:

    option.option1 {
    	font-size:10px;
    }
    option.option2 {
    	font-size:15px;
    }
    option.option3 {
    	font-size:20px;
    }
    option.option4 {
    	font-size:25px;
    }
    option.option5 {
    	font-size:30px;
    }
    option.option6 {
    	font-size:35px;
    }
    option.option7 {
    	font-size:40px;
    }
    option.option8 {
    	font-size:45px;
    }
    option.option9 {
    	font-size:50px;
    }
    option.option10 {
    	font-size:55px;
    }
    option.option11 {
    	font-size:60px;
    }
    <select id="font_size" > 
    <option value="0" selected> Choose font size </option>
    <option value="1" class="option1">  Size 1</option>
    <option value="2" class="option2">  Size 2</option>
    <option value="3" class="option3">  Size 3</option>
    <option value="4" class="option4">  Size 4</option>
    <option value="5" class="option5">  Size 5</option>
    <option value="6" class="option6">  Size 6</option>
    <option value="7" class="option7">  Size 7</option>
    <option value="8" class="option8">  Size 8</option>
    <option value="9" class="option9">  Size 9</option>
    <option value="10" class="option10">  Size 10</option>
    <option value="11" class="option11">  Size 11</option>
    </select>

0 个答案:

没有答案