How exactly is the code being generated? Chances are the alignment in the input field is incorrect because of so many non-compliant oddities in the code.

There are several uppercase tags, input tags are missing a closing tag, id/class/values, etc are not enclosed in quotes, etc. I would assume it is some combination of the bunch that is causing the input field to do funny stuff.

As for the focus issue, I do not believe it is possible without using javascript to modify the CSS. You could set the :hover in the CSS, but that would obviously only work if they're using the mouse.

If you're able to write the CSS yourself, why wouldn't you be able to use an external JavaScript file as well to change the list colour based on field selection?