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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Like in macromedia.com
    I like the buttons they use there, when you hover them the border gets green. How do you do this with CSS?

    Thanks

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Are these buttons true native components, or images/text with CSS effects?
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    In macromedia maybe thay are images, but I've seen on a lot of sites the typical input box (like the one I'm writing in now) that when you click on them they change color.
    Like in deviantart.com

  5. #4
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    I just happened to book mark this page. I like this effect also.

    Form Highlighting


  6. #5
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    kinda like my top menu on karinne.net?

    http://www.alistapart.com/articles/taminglists/

    or go ahead and view the css and source of my site
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  7. #6
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    hmmm... i just re-read the subject of this thread... you're talking about input boxes in forms right?

    html
    Code:
    <input type="text" name="name" size="40" class="formfield" 
    onfocus="this.style.background='#fff'" 
    onblur="this.style.background='#dedede'" />
    that changes the background... to change the border i assume you could do this.style.border='#090'

    and you can change the onfocus to onmouseover

    here's the class .formfield
    Code:
    .formfield {
    	border: 1px solid #69c;
    	color: #000;
    	font-size: 9pt;
    	background-color: #dedede;
    }
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  8. #7
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    OK, thanks, that will do trick more than enough.
    The "this.style" is javascript?

  9. #8
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    The "this.style" is javascript?
    yes
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  10. #9
    Senior Member
    Join Date
    Dec 2003
    Posts
    1,274
    Member #
    4362
    Now I have another problem:
    I had already a [onfocus="this.value=' ' "], how do I add also the [this.background='#whatever'], so they both work?

    Also: the "this." JS can only be used with certain attributes (like background), or can you put perfectly [this.border='1px solid #000']?

    Thanks

  11. #10
    Senior Member tekp's Avatar
    Join Date
    Jan 2004
    Location
    A small village near a small city near a small cit
    Posts
    918
    Member #
    4667
    Liked
    1 times
    i think you can have mroe than one action at a time, e.g

    Code:
    <input type="text" onFocus="this.vallue=' '; this.style.background='#FFFFFF';" />
    but im not too sure. and yes, i think one u have "this." or "name." and then "style." u can add any CSS u like, e.g. "this.style.text-decoration='underlin';"

    although I am not sure, and I dont think u can hve lognhand ones, e.g. background-color and background-image


    dont take my word for it though, im just rambling


    EDIT:
    actually I know you can do this because I have done it on my site *duh*

    http://tekp.com - look at the nav, javascript changes the abckgruond coklour and the value of the form field above the nav in the same onMosueOver parameter.
    tekp :cheeky: tekponline.com


Page 1 of 2 1 2 LastLast

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
  •  

Search tags for this page

box color for input

,

change color of input form border on hover

,

css change form input border on hover

,

css input search form hover color

,

form field hover css

,

how to change form on click hover

,

html sign up form and box changes on hover

,

input box onmouseover change color

,

input field color change on click

,

input field hover or select style

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:35 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com