#94 new
Greg Woods

effects.highlight() on input fields fails to revert default IE Win styles

Reported by Greg Woods | September 26th, 2008 @ 10:43 AM

By default IE Win applies it's own styling to input fields. In Vista this is slightly rounded corners, and two tone blue border.

Any change to the background color of an input tag (I've used textbox) results in losing the default style of those fields, and going back to the old Windows 3.x chunky faux 3D style. There is nothing that can be done about this whilst the effect is running, but when it is finished, the input field should revert back to how it was before the effect.

Example, non scriptaculous code

Hope this helps. In the meantime, I will probably put the effect on the enclosing tr, though I would prefer the input tag.

Comments and changes to this ticket

  • Greg Woods

    Greg Woods September 26th, 2008 @ 10:46 AM

    <input onclick="test()" type="text" name="txtForename" value="" />
    <script type="text/javascript">
    	var state = "on"
    	function test() {
    		if (state == "on") {
    			state = "off"
    			$("txtForename").style.backgroundColor = "red";
    		} else {
    			state = "on"
    			//$("txtForename").style.backgroundColor = "white"; 	//this doesn't work nicely in IE
    			$("txtForename").style.backgroundColor = ""; 		//this restores correct visual style in IE
  • ronin-15560 (at lighthouseapp)

    ronin-15560 (at lighthouseapp) November 20th, 2008 @ 08:28 PM

    • Tag changed from effect.highlight, scriptaculous to effect.highlight, scriptaculous

    I think you can make this work by using the @@@restorecolor@@@ option:

    new Effect.Highlight('some_input',{ restorecolor: 'auto' });

    Can you try?

  • Greg Woods

    Greg Woods January 2nd, 2009 @ 11:05 AM

    Sorry for the late reply. Using { restorecolor : 'auto' } causes an error in prototype.js line 1921 'Invalid Property Value' My versions are: prototype, scriptaculous 1.8.1

    using { restorecolor : '' } does not cause the error but also does not solve my original problem.

  • Ben Pickles

    Ben Pickles January 22nd, 2009 @ 06:35 PM

    I too had the error "Invalid Property Value" in IE6 when using Effect.Highlight. The problem in my case was that I was sending a three character hex code (#FC0) and when I converted it to six (#FFCC00) the errors went away.

  • Ben Pickles

    Ben Pickles January 22nd, 2009 @ 06:44 PM

    Me again. Just to say that I realise the documentation specifies a six character hex but I was dynamically getting the colour from elsewhere in the page using Prototype's getStyle('backgroundColor') and IE6 returns just the three characters if that's how you've defined it in the CSS. Mmmk.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket