axure切换焦点文本框样式

在之前的文章中，我们介绍过在axure中自定义文本框样式的方法，今天我们再深入一些，当文本框的焦点发生变化时，动态切换焦点文本框的样式。先看效果：

制作步骤：
先把文本框的默认样式做出来：拖入两个文本框，分别命名为用户名、密码，隐藏边框，设置好提示文字；、
拖入两个矩形，设置高度略大于文本框，边框颜色为浅灰色，分别命名为用户名边框、密码边框，分别把两个文本框置于对应的边框上方。




开始做交互，当文本框获取焦点时，改变边框颜色：当文本框获取焦点时，把对应的边框矩形设置为选中状态，失去焦点时，取消对应的边框矩形的选中状态。用例如下：


设置两个边框矩形的“选中”样式：线段颜色为橙色；


当页面载入时，焦点应该自动设置在用户名文本框中，所以在页面载入时添加用例如下：

需要说明的是，这个自动获取焦点动作在chrome浏览器中可能没有效果，使用IE内核的浏览器如（搜狗浏览器）是可以的；
其中“设置选中状态于 用户名边框="true"”这个动作必须要加上，否则没有效果。
OK，大功告成~~