htmlayout设计ui 基础篇：[14]菜单选中态

1、第一，我们先来写一个简单的select代码如下： <select> <option>One</option> <option>Two</option> <option>Three</option> <option selected>Four</option> <option>Five</option> <option>Six</option> <option>Seven</option> <option>Eight</option> <option>Nine</option> <option>Ten</option> <option>Eleven</option> <option>Twelve</option> </select>显示效果图如下：

2、第二，接下来，我们要实现当我们选中<option>项时，前面有个“对勾”表示当前选中项来想一下，这种效果，是不是跟checkbox很像呢?默认时没有勾选住，选中时被勾选住了

3、第三，我们现在来实现这个效果，代码如下： select option { padding-left:20px; } select option:checked { foreground-image:url(stock:checkmark); foreground-repeat:no-repeat; foreground-size:10px; foreground-position:10% 50%; }显示效果图如下：

4、第四，每行代码的具体意思是什么呢？1、用：checked表示，当option被check时，也就是被选中时的状态（这也就是酡箔挝棍前面我说的，跟checkbox原理是一样的）2、padding-left:20px;，表示option中的内容离左边的距离，这样好为“对勾”留下足够的空间显示3、foreground-image:url(stock:checkmark);表示，那个“对勾”的显示图片4、foreground-repeat:no-repeat;表示图片只显示一个，不重复5、foreground-size:10px;表示，“对勾”图片的大小6、foreground-position:10%50%;表示图片显示位置，前面10%（这个也可以直接用数值表示的，例如：2px）表示离左边的距离，50%表示垂直居中

5、第五，现在你明白实现的方法和为什么要这样来实现了吧～其它的，外观显示不同，但实现原理是一致的，不同的只是，它是以图形的方式存在的而已。就像下面的这张显示效果，背景是图，前景选中的样子也是图