CSS Style for input type="button"?

R

Robert Mark Bram

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
:)
 
K

Kris

Robert Mark Bram said:
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>
 
P

Paul Furman

Kris said:
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)
 
L

Luigi Donatello Asero

Paul Furman said:
Kris said:
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?
 
M

mscir

Luigi said:
Paul Furman said:
Kris said:
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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top