Macromedia Input Box Glow

Hint on how to make a gradient glow around an input field...

[jmbishop]

Does anyone know how to add the gradient glow around an input field like the one on the search box at the top of the Macromedia website?

I've figured out how to make a solid outline around the box onfocus but can't figure out the gradient glow.

This is what I have so far...

<style type="text/css">
<!--
myinput {
color: #000000;
border: thin solid #336699;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}

bodytext {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
font-weight: normal;
}
-->
</style>

<input name="Criteria" type="text" class="bodytext" style="width: 173;
height: 22;" onclick="this.className='myinput'; this.value=''"
onChange="this.className='bodytext'; this.value='Enter your search term
here...'" value="Enter your search term here..." size="20"/>

[Slade]

It looks like Flash, to me...

I can see code that should make it degrae if flash isn't supported, but everywhere around it that I rightclicked was flash.

[Purple Martin]

Yes the Macromedia effect is done with Flash.

Here is a way to do it without Flash: this way uses JavaScript to switch the class of a div.

How it works:
1. The input itself has no border.
2. The input is contained in a div which has padding.
3. When the input gets or loses the focus, it calls a JavaScript function which switches the class of the div.

Notes:
1. In this example the two div classes have different background colours, but they could have different background images instead to give a gradient glow effect.
2. I only bothered with document.getElementById, you'd want to use document.all as well for older IE browsers.

<style type="text/css">
<!--
.dim {
position: absolute;
padding: 4px;
background-color: #CCCCCC;
}
.glow {
position: absolute;
padding: 4px;
background-color: #00FF00;
}
.myInput {
border: 0px none #FFFFFF;
}
-->
</style>
<script type="text/javascript">
function doGlow(arg) {
if (arg) {
document.getElementById("search").className = "glow";
} else {
document.getElementById("search").className = "dim";
}
}
</script>
<div id="search" class="dim">
<input class="myInput" size="10" onFocus="doGlow(true)" onBlur="doGlow(false)">
</div>

[Rambo Tribble]

Nice work Purple Martin. It certainly would be easier, though if IE recognized :focus, or even just transparent for a border color.