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:
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.)
The same is true for text boxes. Here is an unformatted text box:
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: OneTwo
Here is how the droprown now displays: DROPDOWNOneTwo
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.