Different input text style and submit button style in CSS

Question

I used

#forms input {
    padding:0.15em;

    height:1.5em;
    border:1px solid #ddd;
    background:#fafafa;
    font:bold 0.95em arial, sans-serif;
    -moz-border-radius:0.4em;
    -khtml-border-radius:0.4em;
}

but it produces the same style to both input text box and submit button. I want to give different style to submit button.

Pekka · Accepted Answer · 2011-04-18 14:16:59Z

6

You have three options:

1. A class

Give the button a class attribute, and style that separately.

<input class="button">

You can address that using

 #forms input.button { ... }

2. Use a different element

use the <button> element:

<button>OK</button>

you can address that using

#forms button { ... }

3. Selector

use the type selector:

    #forms input[type="button"]  { ... }

however, that doesn't work in IE6.

I would go with the first or second one.

answered Apr 18, 2011 at 14:16

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Naveed Ahmad Over a year ago

why not #forms input.submitButton{/* css */} where submitButton will be the class name for the button?

Naveed Ahmad Over a year ago

sorry your modified answer showed up only when I posted the comment.

Richard Poole Over a year ago

If button can't be used for whatever reason, Modernizr can add support for input[type='...'] selectors to IE6: modernizr.com

Collectives™ on Stack Overflow

Different input text style and submit button style in CSS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related