下拉列表框是很常用的元件，Axure元件库也提供了下拉列表框，但是Axure提供的下拉框不够美观，这里我们发扬造轮子的精神，自己定义下拉框。

我们先看一下制作好的省份选择的下拉框：

效果预览：http://www.axurestudy.cn/pr/index.html

【需求分析】

1、下拉列表分成初始状态、初始状态下显示请选择字样，下拉箭头朝下；2、当鼠标点击的时候，下拉框的的边框变成蓝色，下拉箭头朝上，并且展示下拉列表数据项；3、当鼠标在下拉列表项上移动的时候，选项变成蓝色；4、单点击其中一个数据项的时候，下拉框收起，在下拉框里面显示选中项；

【原型设计】

1、现在画布拖入一个矩形框province，并且在矩形框里面输入Font AweSome图标

，字符靠右对齐，如果不会使用Font AweSome的同学，请查看如何使用字体图标；

2、在矩形框里面拖入一个输入框input，边框设置为0，录入文字“ 请选择 ”；

3、拖入一个中继器，在数据源里面录入省份名称数据；

4、点击右键，把中继器转换为动态面板，设置动态面板高度为合适的高度，并且设置动态面板为垂直方面滚动；

5、设置动态面板为隐藏状态；

至此，自定义下拉列表的原型已经制作完成，现在的效果如下所示：

【交互设计】

1、设置矩形框province的交互样式，当矩形框为选中的时候，设置边框颜色为蓝色；

2、输入框PInput和矩形框Province组合，设置该组合的点击事件，当鼠标单击的时候，设置矩形框Province在选中和取消选中之间进行切换；

3、设置矩形框Province的选中事件，当Province被选中，设置切换为，并且展示动态面板；当Province取消选中的时候，设置为 ，并且隐藏动态面板；

4、设置中继器的记录的交互状态，当鼠标悬浮的时候，修改矩形框的填充颜色；

5、当选中中继器的一个记录的时候，设置输入框的值为选中值，并且隐藏下拉列表；

到了这里，自定义下拉列表框就制作好了，同学们赶紧去试试吧。