Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: I know but cannot remember!

  1. #1
    Join Date
    Mar 2005
    Location
    Mumbai,INDIA
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post I know but cannot remember!

    hi there,
    I know this but cannot remember.my problem is, i wanat to color the button appearing on the form (not an image, an actual SUBMIT BUTTON) on my site.I know that this can be done with some thing like -STYLE.THIS.BUTTON. .....
    Can anyone tell me what is the proper code for coloring the button or a source from where i can get a few examples for this.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It depends upon when you want to color the button. One of the most straight forward methods would be:
    HTML Code:
    <input type="submit" value="Submit" style="color:white;background:black;">
    Notice I have specified a color as well as a background, this is to insure that the text is legible. You never know what color (if any) a user may have his/her foreground color set to. In this case a user foreground of black would make the text on this button invisible except for the fact that I have specified white.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Don't necessarily expect the styling of form controls to work. If the user agent relies on the operating system to provide UI widgets, it may be unable to specify how they look.

    Mike

  4. #4
    Join Date
    Mar 2005
    Location
    Mumbai,INDIA
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    If the user agent relies on the operating system to provide UI widgets, it may be unable to specify how they look.
    What do you mean by:User agent relies on the operating system UI widgets.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    He means the browser. Don't worry about it unless you have alot of 'nix (Unix and its clones, etc.) folks viewing your site or are concerned that some folks (maybe Safari users) will see a default button.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by sunny
    What do you mean by:User agent relies on the operating system UI widgets.
    Some user agents (browsers) don't draw controls (User Interface widgets) themselves. Instead, they get the operating system to do it for them. Depending on the OS involved, you may have little ability to affect how the resulting control looks.


    Quote Originally Posted by jscheuer1
    Don't worry about it unless you have alot of 'nix (Unix and its clones, etc.) folks viewing your site or are concerned that some folks (maybe Safari users) will see a default button.
    I was referring to all platforms. Really rudimentary changes to some control types won't be a problem. However, only browsers which draw controls themselves (like Opera) will be truly flexible over a wide range of CSS properties. It was a general warning so that the OP doesn't come back later asking why doing X to control Y doesn't work.

    Mike

  7. #7
    Join Date
    Mar 2005
    Location
    Mumbai,INDIA
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    OK,
    Last query regarding this problem.
    I tried 'hover' code for the button but it doesn't work the code goes like this:
    Code:
    <style>
    .button{background:blue;color:white}
    .button:hover{background:black;color:red}
    </style>
    AND
    Code:
    <form>
    <input class="button" type="submit" value="Submit Form">
    <input class="button" type="reset" value="Reset Form">
    </form>
    I would like to ask whether use of 'hover' is possible with button or not.
    And thanks for answering all the way long.

  8. #8
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by sunny
    .button{background:blue;color:white}
    .button:hover{background:black;color:red}

    [...]

    I would like to ask whether use of 'hover' is possible with button or not.
    Of course it is possible, however IE won't support it - others will. You'll need to script an additional substitute (using onmouseover/out) if you really want the feature for IE.

    Mike

  9. #9
    Join Date
    Mar 2005
    Location
    Mumbai,INDIA
    Posts
    64
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    Does It Mean That i'll have to specify a function for mouseover/out and link it to images and substitute these (form) buttons with those mouse over/out images.
    Is it possible to have these (form) buttons as well as mouseoover/out images Simultaneously.Or is it possible to have a mouseover function to change the color of the button .If yes, please Do write it as i have forgotten .I know that it's simple one.

  10. #10
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by sunny
    Does It Mean That i'll have to specify a function for mouseover/out
    Yes.

    and link it to images and substitute these (form) buttons with those mouse over/out images.
    No, not at all. The functions will just alter the CSS rule that applies to the button.

    Code:
    function setColours(object, foreground, background) {
      var style;
    
      if((style = object.style)) {
        if('string' == typeof foreground) {style.color = foreground;}
        if('string' == typeof background) {style.backgroundColor = background;}
      }
    }
    HTML Code:
    <input class="button" type="submit" value="Submit Form"
     onmouseover="setColours(this, 'red', 'black');"
     onmouseout="setColours(this, '', '');">
    The first call that occurs with the mouseover event sets the foreground ('red') and background ('black') colours through the inline style object, overriding the values supplied by the style sheet. The second call that occurs with the mouseout event sets empty strings for both colours. This effectively removes the overrides, allowing the original colours to be used.

    Mike

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •