yellow boxes and css bars

[alfonce]

Hi,

anybody know the css workaround to those yellow boxes that appear on my form fields from the google bar?
I beleive there is a css workaround but i havent been able to find.
Can anybody tell me why the scroll bar isnt css decorated in ie as it should be.

body {
margin: 0px;
padding: 0px;
font: 12px Arial, sans-serif, Helvetica;
color: #FFFFFF;
background: #000053;
scrollbar-base-color: #000053;
scrollbar-arrow-color: #ffffff;
scrollbar-3dlight-color: #000053;
scrollbar-darkshadow-color: #ffffff;
scrollbar-face-color: #000053;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-track-color: #ffffff;
}

Thanks

Alex.

[edited by: DrDoc at 6:51 pm (utc) on Feb. 13, 2006]
[edit reason] No URLs, thanks. See TOS [WebmasterWorld.com] [/edit]

[Fotiman]

I don't know the answer to your yellow inputs, but I do know that scrollbar styling is NOT valid CSS. In addition, it can be very annoying to users, so I would suggest you avoid trying to style the scrollbars.

[alfonce]

Ok I'll dump the css scroll but the yellow boxes is the real issue.

Ideas anybody?

[DrDoc]

Hmm, good question. From what I can tell, the scrollbars should be colored differently.

With regards to the highlighted fields ... There's nothing you can do short of giving the fields somewhat non-intuitive names. OR, simply color all of them light yellow on purpose :)

The only workaround is something on your end, in the toolbar options. But that will, of course, still leave them highlighted for others.

[alfonce]

hmmm,

well I'll dump the scroller as if people dont like it.
I like it but then it only works in ie anyway.
I have read on the internet about people making the yellow go away with css - no sign of any code though.
The fields are alresady coloured blue and yet google bar overrides....

Bummer

[Fotiman]

I *think* (and I could be wrong), that there was a javascript/css solution that was working, but recent versions of the Google toolbar caused those "fixes" to stop working. I could be wrong though.

It's unfortunate that Google has not addressed this issue at all.

Basically, though, after the page loads and your styles have been applied, THEN the google toolbar applies an inline style which overwrites any color settings you may have assigned. I believe the JavaScript/CSS solution involved adding a listener to every form control so that if the value was changed, the listener would immediately change it back. But like I said, I think this was somehow broken with recent Google Toolbar updates (not sure though).

[Fotiman]

A Google Search for google toolbar workaround [google.com] should yeild the results you're looking for.

[Fotiman]

Note, you can override the Google toolbar by using !important in your style rules. For example:

input { background-color: black !important } 
input { color: yellow !important } 

[edited by: DrDoc at 8:20 pm (utc) on Feb. 13, 2006]

[DrDoc]

Then there's always IE with ignoring !important rules ...

[Fotiman]

I'm not familiar with that particular issue, but I do know that it seems to be obeying my important rule to block the Google Toolbar.

[alfonce]

Hey guys thanks,

Ok I used this

.interface_form_fields {
color: #FFFFFF;
background: #000053;
border: 1px solid #FFFFFF;
}

.interface_form_buttons {
color: #FFFFFF;
background: #000053;
border: 1px solid #FFFFFF;
}

input {
background: #000053!important
}

input {
color: #FFFFFF!important
}

And it woorked from my end.