Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Jan 2005
    Posts
    12
    Member #
    8646
    On Macromedia's webpage they have a nice CSS applied to their input boxes, it's grayed out until you click on it, and then it is bright green border with a white background.

    Does anyone know the code or how I can learn to do this?

  2.  

  3. #2
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    It's DHTML.. You need to use onfocus and onblue, like this..

    <input type="text" value="nothing" onfocus="this.style.backgroundColor='#dddddd'" onblur="this.style.backgroundColor='#ffffff'" />

    You can read good stuff on it at http://www.w3schools.com/dhtml/default.asp ..
    It's based on the document object model which is the standard for web design..
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog

  4. #3
    Junior Member
    Join Date
    Jan 2005
    Posts
    12
    Member #
    8646
    Are you sure it's DHTML that Macromedia is using? I just thought it'd be more CSS based, similiar to an :active property of the anchor tags...

  5. #4
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    Oh.. I didn't even look at it.. Just went by what you said heh.. Let me check out the code now..
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog

  6. #5
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    I checked it out .. The functionality is in this javascript file.. http://www.macromedia.com/js/globalnav.js .. CSS can't do what you described, as far as I know.. You can look in that js file to figure it out.. it is done the way I explained it to you .. except not the background.. the border-color..
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog

  7. #6
    Junior Member
    Join Date
    Jan 2005
    Posts
    12
    Member #
    8646
    You can change it with CSS...

    simply do

    input:focus {
    border-color: #000;
    border: 1px solid #000000;
    }

  8. #7
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    Ah that's cool.. Just did a test and it works in all the main 4 browsers except IE.. sucks.. would be a big shortcut for the javascript.
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog

  9. #8
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    I wonder if you know where you can see a full list of CSS2 elements and attributes?
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog

  10. #9
    Junior Member
    Join Date
    Jan 2005
    Posts
    12
    Member #
    8646
    I found this on codingforums.com ... this works in all browsers, where the one above ony works in mozilla/firefox.

    "<input onFocus="this.className='focus'" onBlur="this.className='blur'" id="FirstName" name="FirstName">


    where in my .css it looks like this::

    .focus{
    padding-left: 5px;
    background-color: #eeeeee;
    filter: glow (Color="red", Strength="100");
    }

    .blur{
    background-color: #fff;
    border: dashed 1px #999999;
    }
    "

  11. #10
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    That's a cool technique.. Makes it so you can have the same styles on all of them without writing a Javascript file.. It's pretty much the same thing I showed though..
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:33 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com