I found a CSS treatment I LOVE for forms. However, the place I saw it was ONLY using it for a login box - so they needed two textboxes, both required. I’m trying to figure out what changes I need to make to get it to work with select boxes and also to troubleshoot some textboxes that don’t work correctly.
The dev site we’re using is here:
Navigate to the Profile tab. I’ve commented out most of it but left some that illustrates both issues I’m having. The first two fields - Primary Insurance Company and ID - both work correctly so you can see what I’m trying to accomplish. The next two - Group or FECA Number and Effective date are stuck in the hover state. Those two are just text boxes like the first two and I haven’t been able to figure out why those aren’t working properly. Insurance Company’s Payer ID is the same, i.e., stuck in hover.
The remaining two - Your Relationship to the Insured and Authorize Payment of Benefits to Provider - are both select boxes. The hover state works fine on those - but once you enter something, the label no longer keeps the hover styles - but goes back to the static state - which means that the label and the value you just entered are on top of one another. SOMETIMES on select boxes, the label disappears entirely. I can show you an example of that if needed. I know it’s happening on the Time Zone select box - which has a lot of options - so number of options could have something to do with it.
One other thing about this code - it doesn’t work if you remove the “required” attribute. We only need to mark a handful of items as required, but with the existing CSS - since it was originally intended to be only for a username password form - won’t work without all fields marked as required.