homefeaturesexamplesDOCUMENTATIONblogpricingcontact us
technical documentationCATI documentationcookbookrobot

Formatting buttons, boxes and dropdown lists

Problem

You want to control the appearence of buttons, boxes and dropdown lists.

Solution

Use the .BUTTON, .TEXTBOX and .DROPDOWN CSS styles in the style.css file located in the project directory.

Discussion

Questionnaire HTML buttons are formatted according to the .BUTTON CSS style whereas questionnaire open-end text use the .TEXTBOX CSS style, numeric boxes use .NUMBOX, and the dropdown lists follow the .DROPDOWN CSS style. All CSS properties relevant to these HTML objects can be adjusted.

For example, here is an image of a typical (unformatted) HTML button: Let's create the following CSS .BUTTON style and store it in the style.css file for the project:

    .BUTTON { padding: 3px; color: #224059; background-color: #b5c9e2; border: 1px #000000 solid; }

Here is how the button now displays: (Cute!) Buttons can also benefit from a visual effect when the mouse travels over them. Let's redefine the .BUTTON style and add a .BUTTON:hover style as follows. (We can't show the result here but you can try it in your projects.)

    .BUTTON, .BUTTON:hover { font-weight: bold; padding: 3px; color: #224059; background-color: #b5c9e2; border: 1px #000000 solid; }
    .BUTTON:hover { border: 2px #000000 solid; padding: 2px; }

The same is true for text boxes. Here is an unformatted text box:

Let's apply the following CSS .TEXTBOX style and store it in the style.css file for the project:

    .TEXTBOX { padding: 3px; background-color: #E4EDF9; border: 1px #000000 solid; }

Here is how the text box now displays:

Numeric boxes are controlled by the .NUMBOX format. Distinguishing numeric boxes from text boxes allows things like the right-justification of numbers in numeric boxes (using text-align: right;).

Let's see dropdown lists. Here is an unformatted dropdown list:

Let's apply the following CSS .DROPDOWN style and store it in the style.css file for the project:

    .DROPDOWN { background-color: #E4EDF9; }

Here is how the droprown now displays:

CATI CONTEXT: In the CATI interface, buttons are used for a variety of purposes. CallWeb offers a collection of CSS styles that can produce more professional-looking pages. The :hover trick can be used to "animate" the buttons.

   

e-mail technical support!