CSS Style for input type="button"?

Discussion in 'HTML' started by Robert Mark Bram, Feb 16, 2004.

  1. Howdy All!

    How can I define a style sheet for a button class..

    .button
    {
    width: 120px;
    } # end button style

    <input name="reset" type="button" class="button" value="Reset">


    But is there a way I can specify the style to simply affect all input tags
    of type button?

    Thanks for any advice!

    Rob
    :)
     
    Robert Mark Bram, Feb 16, 2004
    #1
    1. Advertising

  2. Robert Mark Bram

    Kris Guest

    In article <4030b032$0$15134$>,
    "Robert Mark Bram" <> wrote:

    > How can I define a style sheet for a button class..
    >
    > .button
    > {
    > width: 120px;
    > } # end button style
    >
    > <input name="reset" type="button" class="button" value="Reset">


    Comments is CSS go:
    /* end button style */

    >
    > But is there a way I can specify the style to simply affect all input tags
    > of type button?


    Set a class="button" on all that apply, or use
    input[type="submit"], input[type="reset"] { ... }
    , but that is quite incompatible with shitty browsers.

    Read more:
    <http://www.cs.tut.fi/~jkorpela/forms/present.html>

    --
    Kris
    <> (nl)
    <http://www.cinnamon.nl/>
     
    Kris, Feb 16, 2004
    #2
    1. Advertising

  3. Robert Mark Bram

    Paul Furman Guest

    Kris wrote:
    >
    >
    >>But is there a way I can specify the style to simply affect all input tags
    >>of type button?

    >
    >
    > Set a class="button" on all that apply, or use
    > input[type="submit"], input[type="reset"] { ... }
    > , but that is quite incompatible with shitty browsers.
    >
    > Read more:
    > <http://www.cs.tut.fi/~jkorpela/forms/present.html>




    This worked for me:
    button {
    border-size: 0px;
    border-style: none;
    background: inherit;
    font: inherit;
    color: blue;
    cursor: hand;
    cursor: pointer;
    padding: 0px;
    }
    makes a button look like a link
    (need to add underline and or hover to finish it)
     
    Paul Furman, Feb 16, 2004
    #3
  4. "Paul Furman" <> skrev i meddelandet
    news:...
    > Kris wrote:
    > >
    > >
    > >>But is there a way I can specify the style to simply affect all input

    tags
    > >>of type button?

    > >
    > >
    > > Set a class="button" on all that apply, or use
    > > input[type="submit"], input[type="reset"] { ... }
    > > , but that is quite incompatible with shitty browsers.
    > >
    > > Read more:
    > > <http://www.cs.tut.fi/~jkorpela/forms/present.html>

    >
    >
    >
    > This worked for me:
    > button {
    > border-size: 0px;
    > border-style: none;
    > background: inherit;
    > font: inherit;
    > color: blue;
    > cursor: hand;
    > cursor: pointer;
    > padding: 0px;
    > }
    > makes a button look like a link
    > (need to add underline and or hover to finish it)


    Did you define "cursor" twice?


    --
    Luigi ( un italiano che vive in Svezia)
    http://www.italymap.dk
    http://www.scaiecat-spa-gigi.com/sv/presentartiklar.html
     
    Luigi Donatello Asero, Feb 16, 2004
    #4
  5. Robert Mark Bram

    Paul Furman Guest

    Luigi Donatello Asero wrote:

    > "Paul Furman" <> skrev i meddelandet


    >> button {
    >> cursor: hand;
    >> cursor: pointer;
    >> }
    >>makes a button look like a link

    >
    > Did you define "cursor" twice?


    I guess it's a hand that points???
     
    Paul Furman, Feb 17, 2004
    #5
  6. Robert Mark Bram

    mscir Guest

    Luigi Donatello Asero wrote:
    > "Paul Furman" <>
    >
    >>Kris wrote:
    >>>
    >>>>But is there a way I can specify the style to simply affect all input tags
    >>>>of type button?
    >>>
    >>>Set a class="button" on all that apply, or use
    >>>input[type="submit"], input[type="reset"] { ... }
    >>>, but that is quite incompatible with shitty browsers.
    >>>
    >>><http://www.cs.tut.fi/~jkorpela/forms/present.html>

    >>
    >>This worked for me:
    >> button {
    >> border-size: 0px;
    >> border-style: none;
    >> background: inherit;
    >> font: inherit;
    >> color: blue;
    >> cursor: hand;
    >> cursor: pointer;
    >> padding: 0px;
    >> }
    >>makes a button look like a link
    >>(need to add underline and or hover to finish it)

    >
    > Did you define "cursor" twice?


    http://devedge.netscape.com/viewsource/2002/cursor/

    A good number of developers have asked when Mozilla and Netscape 6+ plan
    to implement support for the cursor property. They're often surprised
    to discover that both browsers already do. However, what should come as
    no surprise is that the support is based on the approved W3C
    specification for CSS2, as opposed to adding portions at will.

    The basic problem is this: Internet Explorer 5.x for Windows recognizes
    the value hand, which appears nowhere in section 18.1 of CSS2-- nor
    anywhere else in the specification, for that matter. The value which
    most closely corresponds to the behavior of hand is pointer, which the
    specification defines as: "The cursor is a pointer that indicates a
    link." Note that doesn't say anything about a hand appearing, but going
    by browser conventions to date, the practical effect is the same.

    Unfortunately, IE5.x/Win doesn't recognize the value pointer as meaning
    anything at all. IE6/Win and IE5.x/Mac do both recognize pointer as well
    as hand, fortunately. Meanwhile, Mozilla and Netscape 6+ follow the CSS2
    specification and handle pointer, but ignore the proprietary value hand.

    So if Mozilla/Netscape ignores hand and IE5.x/Win ignores pointer,
    what's an author to do? Ask for both in the proper manner, and you shall
    be rewarded.

    a {cursor: pointer; cursor: hand;}

    Do not reverse those two values! If you write your styles as shown
    above, then NS6+ will see the first value and ignore the second, so you
    get pointer. In IE5.x/Win, it sees both and uses the second, so you get
    hand. If you reverse the values, then Netscape 6+ will be okay, but
    IE5.x/Win will see both and try to use the second. That won't get you
    the little hand-pointer icon in IE5.x/Win.
     
    mscir, Feb 17, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Aaron Beall
    Replies:
    2
    Views:
    1,915
    Aaron Beall
    Sep 14, 2007
  2. Ken Varn
    Replies:
    0
    Views:
    538
    Ken Varn
    Apr 26, 2004
  3. Sam
    Replies:
    1
    Views:
    1,230
    Brian Kenneth Nielsen
    Nov 25, 2008
  4. Ron Brennan
    Replies:
    5
    Views:
    344
    Dr John Stockton
    May 14, 2004
  5. Nik Coughlin
    Replies:
    2
    Views:
    199
    Nik Coughlin
    Jan 23, 2008
Loading...

Share This Page