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、第五，现在你明白实现的方法和为什么要这样来实现了吧～

其它的，外观显示不同，但实现原理是一致的，不同的只是，它是以图形的方式存在的而已。

就像下面的这张显示效果，背景是图，前景选中的样子也是图