我有一个下拉菜单,允许用户选择字体大小,和 每个尺寸以其代表的大小显示为“实时”。
我的代码工作正常,但不幸的是,关闭菜单的初始显示效果不佳, 它看起来很模糊,“低分辨率”(见下图)。我该如何解决这个问题?
我的代码:
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>