homepage Welcome to WebmasterWorld Guest from 54.167.182.81
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

10+ Year Member



 
Msg#: 3309 posted 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

10+ Year Member



 
Msg#: 3309 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3309 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3309 posted 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