Make Hyperlinks Visually Interactive - Greg Collins

InfoPath Dev

This Blog


Greg Collins

Make Hyperlinks Visually Interactive

The InfoPath designer only allows you to change the color of a hyperlink. It does not allow you to remove the underline text decoration, nor does it allow you to create a separate color for when the mouse pointer is hovering over the hyperlink or for when the user tabs to the hyperlink. These designer limitations can be overcome by manually modifying the view .xsl file.

In this task we will make hyperlinks visually interactive by adding a custom internal style sheet to your view .xsl file. Let's start by designing a new blank form.

Add a Hyperlink control to the view:

  1. Open the Controls task pane.
  2. Insert a Hyperlink into the view.
  3. In the Insert Hyperlink dialog box, type into the Link To Address text box, and then click OK.

Try it:

  1. Preview your form.
  2. Hover over the hyperlink, tab to it, and click on it to see how it responds.
  3. Close the preview.

As you can see, InfoPath does not display hyperlinks differently for any of the mouse and keyboard activity we tried. Now let's enhance the behavior.

Manually add a custom internal style sheet to the view:

  1. Choose Extract Form Files from the File menu.
  2. Select a location to save your extracted form files to, and then click OK.
  3. Close InfoPath to release the lock it places on your form files.
  4. Using a text editor, open the view .xsl file.
  5. Add the following code just below the last style element:

<style title="myCustomHyperlinks" type="text/css">
    A { COLOR: orange; TEXT-DECORATION: none }
    A:visited { COLOR: red; } <!-- This pseudo class has no effect in the editor -->
    A:active { COLOR: blue; TEXT-DECORATION: underline }
    A:hover { COLOR: green; TEXT-DECORATION: underline }

If you have already made any color changes to the hyperlinks in the designer, you will need to manually remove the font elements immediately around your hyperlink text to allow your new styles to take effect.

  1. Save your view .xsl file, and then close the text editor.

Try it:

  1. Reopen your form template by right-clicking the manifest.xsf file and choosing Design.
  2. Preview your form.
  3. Hover over the hyperlink, tab to it, and click on it to see the changes.

The styles specified in the active pseudo class appear when the user tabs to the hyperlink, while the style specified in the hover pseudo class appear when the user holds the mouse pointer over the hyperlink. The ordering of the pseudo classes is important. If active is listed after hover, the user will not have any mouseover effects for the active hyperlink. If this is the effect you desire, make the appropriate change in order.

The visited pseudo class appears to work in the designer, but the InfoPath editor does not keep track of which links were visited; therefore the user will never see this style applied.

For more information about custom style sheets, refer to Add a Custom Style Sheet to a View.

©2005 Greg Collins. All rights reserved. Licensed to Autonomy Systems, LLC for display on

Published Jun 20 2005, 02:34 PM by Greg Collins
Filed under:


No Comments
Copyright © 2003-2019 Qdabra Software. All rights reserved.
View our Terms of Use.