homepage Welcome to WebmasterWorld Guest from 174.129.130.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Macromedia Input Box Glow
Hint on how to make a gradient glow around an input field...
jmbishop




msg:1202386
 11:14 pm on Mar 31, 2004 (gmt 0)

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




msg:1202387
 11:35 pm on Mar 31, 2004 (gmt 0)

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




msg:1202388
 1:30 am on Apr 1, 2004 (gmt 0)

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




msg:1202389
 2:49 am on Apr 1, 2004 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved