Styling Widgets! 1

The following input element should be transparent, it should be the same height and width as the red bars, it should be at the ,strong>same position as the red bars indicate, the text inside it should be centred, as should the input itself, the text should fit in the input box, and the border should become inset when the input box is being hovered over.

Debugging aids

Here is the same test, but without the red bars. It should look identical except, obviously, for the lack fo red bars.

Here is the same test, with red bars, but this time the INPUT control has been replaced by a DIV.

xxx

Problems in Mozilla as of 1999-11-10:

  1. The float is affecting the alignment of the input control. It should not -- the input should act just like the block in the second debug test above.
  2. Clicking on the edit box changes both the background colour and alignment of the background.
  3. border: width style; is not resetting the color.

Prev Next