3.5　文本框边框变色

案例描述

在搜索框中，当搜索框获取焦点时，文本框边框变成蓝色；当失去焦点时，变回灰色，如图3-60所示。

思路分析

• ▷　输入框的样式在两种不同状态下切换，可以通过交互样式来实现。
• ▷　当文本框获取焦点时，设置选中时的样式。
• ▷　当文本框失去焦点时，设置未选中时的样式。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在左侧“元件库”面板中将“图片”元件拖入编辑区中，双击并导入图片文件，在工具栏中设置x和y分别为240和55，“宽度”为240，“高度”为82，在右侧“检视：图片”区域设置名称为logo，如图3-61所示。

（3）在左侧“元件库”面板中将“矩形1”元件拖入编辑区中，在右侧“检视：矩形”区域设置名称为border，在工具栏中设置x和y分别为85和150，“宽度”为500，“高度”为35，“线段颜色”为灰色（#B3B3B3），如图3-62所示。

（4）在右侧“属性”面板中的“交互样式设置”区域单击“选中”超链接，弹出“交互样式设置”对话框，选中“线段颜色”复选框，单击右侧的“线段颜色”下三角按钮，在弹出的颜色面板中输入颜色值为#3388ff，如图3-63所示。单击“确定”按钮返回至编辑区中。

（5）在左侧“元件库”面板中将“文本框”元件拖入编辑区中，在工具栏中设置x和y分别为86和151，“宽度”为498，“高度”为33，在右侧“检视：文本框”区域设置名称为search_txt，在“属性”面板中选中“隐藏边框”复选框，如图3-64所示。

（6）在“交互”区域双击“获取焦点时”选项，弹出“用例编辑<获取焦点时>”对话框，在左侧“添加动作”区域选择“选中”选项，在右侧“配置动作”区域选中“border（矩形）”复选框，如图3-65所示。单击“确定”按钮返回至编辑区中。

（7）在右侧“属性”面板中双击“失去焦点时”选项，弹出“用例编辑<失去焦点时>”对话框，在左侧“添加动作”区域选择“取消选中”选项，在右侧“配置动作”区域选中“border（矩形）”复选框，如图3-66所示。单击“确定”按钮返回至编辑区中。

（8）在左侧“元件库”面板中拖入“矩形2”元件至编辑区中，在工具栏中设置x和y分别为584和150，“宽度”为98，“高度”为35，在右侧“检视：矩形”区域设置名称为btn，如图3-67所示。

（9）双击“矩形2”元件，使其呈编辑状态，输入“百度一下”，在工具栏中设置“字体尺寸”为14，“文本颜色”为白色，“填充颜色”为蓝色（#317ef3），如图3-68所示。

（10）按Ctrl+S快捷键，以“3.5”为名称保存该文件，然后按F5键预览效果，如图3-69所示。