© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

CUSTOM TEXT FIELD

Create a custom text field by placing a transparent text field widget on top of a styled rectangle widget. Use the rectangle's Selected interaction style to indicate when the text field has focus in the web browser.

STEP 1: MAKE THE TEXT FIELD TRANSPARENT

Select the text field widget by clicking it twice on the canvas: one click to select the "Custom Text Field" group and a second to select the text field itself. (Alternatively, you can select the text field directly in the Outline pane.) Then, scroll to the bottom of the Properties tab in the Inspector and check the box for "Hide Border". You can also do this by right-clicking the text field and selecting "Hide Border" in the context menu.


Next, use the "Fill" color picker in either the Style Toolbar or the Style tab of the Inspector to give the text field a transparent fill color. This, coupled with the hidden border, will render the text field completely transparent so that only the "Background" rectangle behind it is visible.

MORE RESOURCES

 

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 2: PREVIEW

Preview the page in your web browser and enter some text into the custom text field.

 

STEP 4: REVERT STYLING WHEN TEXT FIELD LOSES FOCUS

With the text field widget still selected, double-click "OnLostFocus" in the Properties tab of the Inspector to give it a new OnLostFocus case.


In the Case Editor, choose the "Not Selected" action under "Set Selected/Checked". Under "Configure actions", check the "Background" rectangle widget. This will remove the rectangle's Selected state, which will deactivate its Selected interaction style and return it to its default styling.


Click "OK" to close the Case Editor.

STEP 5: PREVIEW

Preview the page in your web browser and click on the custom text field. Notice that the rectangle's outline turns green and becomes thicker. Then, click off the text field to return the rectangle to its default styling.

TRY IT!

STEP 3: CHANGE STYLING WHEN TEXT FIELD IS FOCUSED

The "Background" rectangle widget has a Selected interaction style set up that we can use to indicate when the text field has focus in the web browser. To do this, we'll use the text field widget's OnFocus event.


Back in Axure RP, select the text field widget again and double-click "OnFocus" in the Properties tab of the Inspector to give it a new OnFocus case.


In the Case Editor, choose the "Selected" action under "Set Selected/Checked". Under "Configure actions", check the "Background" rectangle widget. This will set the rectangle to its Selected state, which will activate its Selected interaction style.


Click "OK" to close the Case Editor.

In the training document, open the page named "Custom Text Field". On the canvas is a group of three widgets: a styled rectangle widget, a text field widget, and a "User" icon widget from Axure RP's Icons widget library.