jQuery-UI arrow boxes

This blog describes how to add arrows to the standard jQuery-UI error and highlight boxes. Arrows can be either from the left, right, top or bottom.

jquery-ui arrow boxes

Standard Boxes

As per http://jqueryui.com/themeroller/ the standard boxes are as so:

standard jQuery UI boxes




Arrow Boxes

The arrow boxes can be created in the same way except that the classes

arrow_box and left are specified also (where left can be either, left, right, top or bottom)








Note that the only difference in creating them is the class (left, right, top, bottom).

Classes inlineBlock and pad10px are self explanatory and not mandatory.

The following CSS is required. It must be included in the page after the standard jQuery-UI CSS file.



Here’s a demo. Just download and unzip.


Sizing the arrows

In order to do this, the CSS (above) will have to be changed. Basically, wherever 11px or 10px is specified, change accordingly.

The CSS for this is derived direct from  http://cssarrowplease.com/ and adjusted to be applicable for the standard jQuery-UI error and highlight boxes.

Experimenting at http://cssarrowplease.com/ will help allot.

Custom Colors

There are just four colours used throughout the CSS, red-background, red-border, yellow-background and yellow-border. Adjust as required.

(…and yep, LESS or something to that effect would be very applicable here….)


As ever, comments, opinions, corrections etc. all very welcome.