Modifying all form elements - how?

Discussion in 'HTML' started by Joshua Beall, Dec 13, 2004.

  1. Joshua Beall

    Joshua Beall Guest

    Hi All,

    Normally when you want to change the behavior of a tag via CSS, you just
    declare something like this:

    H1 { border: 1px solid #C0C0C0; }

    Now all <h1></h1> blocks should have a silver solid border around them.

    But, what if I want to modify the default look of a form element, such as
    the submit button or a textfield? These are specified by <input
    type="submit"> or <input type="text">, respectively, so they do not have a 1
    to 1 mapping to a tag... so I am unsure how to change the look of only one
    type of input via CSS.

    Is there a way to do this without having to specify <input class='text'
    type='test'> (e.g., without having to change all the <input> tags)?

    Thanks,
    -Josh
    Joshua Beall, Dec 13, 2004
    #1
    1. Advertising

  2. Joshua Beall

    paul Guest

    Joshua Beall wrote:
    > Hi All,
    >
    > Normally when you want to change the behavior of a tag via CSS, you just
    > declare something like this:
    >
    > H1 { border: 1px solid #C0C0C0; }
    >
    > Now all <h1></h1> blocks should have a silver solid border around them.
    >
    > But, what if I want to modify the default look of a form element, such as
    > the submit button or a textfield? These are specified by <input
    > type="submit"> or <input type="text">, respectively, so they do not have a 1
    > to 1 mapping to a tag... so I am unsure how to change the look of only one
    > type of input via CSS.
    >
    > Is there a way to do this without having to specify <input class='text'
    > type='test'> (e.g., without having to change all the <input> tags)?


    button {border: 1px solid #C0C0C0;}
    input {border: 1px solid #C0C0C0;}
    label {border: 1px solid #C0C0C0;}
    paul, Dec 13, 2004
    #2
    1. Advertising

  3. Joshua Beall

    Steve Pugh Guest

    On Mon, 13 Dec 2004 17:33:23 GMT, "Joshua Beall"
    <> wrote:

    >But, what if I want to modify the default look of a form element, such as
    >the submit button or a textfield? These are specified by <input
    >type="submit"> or <input type="text">, respectively, so they do not have a 1
    >to 1 mapping to a tag... so I am unsure how to change the look of only one
    >type of input via CSS.
    >
    >Is there a way to do this without having to specify <input class='text'
    >type='test'> (e.g., without having to change all the <input> tags)?


    In theoy by using attribute selectors,
    input[type=text] { ... styles ... }

    But IE doesn't support attribute selectors so classes it is.

    Steve
    Steve Pugh, Dec 13, 2004
    #3
  4. Joshua Beall

    Joshua Beall Guest

    "paul" <> wrote in message
    news:p...

    > button {border: 1px solid #C0C0C0;}
    > input {border: 1px solid #C0C0C0;}
    > label {border: 1px solid #C0C0C0;}


    Modifying the behavior of the <input> tag changes both text fields and
    submit buttons.

    How do I set text inputs, radio buttons, submit buttons, and all the other
    <input type='something'> form elements all independently of each other?
    Joshua Beall, Dec 13, 2004
    #4
  5. Joshua Beall

    Steve Pugh Guest

    On Mon, 13 Dec 2004 09:51:48 -0800, paul <> wrote:
    >Joshua Beall wrote:


    >> But, what if I want to modify the default look of a form element, such as
    >> the submit button or a textfield? These are specified by <input
    >> type="submit"> or <input type="text">, respectively, so they do not have a 1
    >> to 1 mapping to a tag... so I am unsure how to change the look of only one
    >> type of input via CSS.
    >>

    > button {border: 1px solid #C0C0C0;}
    > input {border: 1px solid #C0C0C0;}
    > label {border: 1px solid #C0C0C0;}


    Um, read the OP's question again. He wants to avoid having the same
    styles set for all the different types of input (<input type="text">,
    <input type="checkbox">, <input type="submit"> etc.). What you're
    suggesting will do exactly what he doesn't want.

    Steve
    Steve Pugh, Dec 13, 2004
    #5
  6. Joshua Beall

    Joshua Beall Guest

    "Steve Pugh" <> wrote in message
    news:...
    > In theoy by using attribute selectors,
    > input[type=text] { ... styles ... }
    >
    > But IE doesn't support attribute selectors so classes it is.


    Figures... :-/

    I'm curious, what was the rationale behind making most of the form elements
    <input> tags? It would have made more sense to me to give each its own
    tag... ?
    Joshua Beall, Dec 13, 2004
    #6
  7. Joshua Beall

    Neal Guest

    Joshua Beall:

    > How do I set text inputs, radio buttons, submit buttons, and all the
    > other
    > <input type='something'> form elements all independently of each other?


    Add a class to the element, style the element with the class.

    <input type="text" class="text" ... >
    <input type="checkbox" class="checkbox" ... >

    And the CSS

    input.text {}
    input.checkbox {}
    Neal, Dec 13, 2004
    #7
  8. Joshua Beall

    Guest

    Joshua Beall <> wrote:
    > "Steve Pugh" <> wrote in message
    > news:...
    >> In theoy by using attribute selectors,
    >> input[type=text] { ... styles ... }
    >>
    >> But IE doesn't support attribute selectors so classes it is.

    >
    > Figures... :-/
    >
    > I'm curious, what was the rationale behind making most of the form elements
    > <input> tags? It would have made more sense to me to give each its own
    > tag... ?


    I don't know personally, but it's an interesting debate. :)

    Personally, I sort of feel they should all be input tags:

    <input type="textarea" ... >Value</input>


    <input type="select"><option ..> ... </input>

    And groups of radio buttons:

    <input type="radio"> ... <option ..></input>

    (Ok, well, maybe radio is pushing it a little, because you typically want
    text between each button)

    I also wish <input type="textarea" ..> had some sort of
    type="text/plain|text/xml" with a dtd="url" and a "menu=url" type of deal
    so you could design semi-complex editors online if you wanted. (where
    the menu URL would presumably point to some type of XML document describing
    menu options for editing the text area, Bold/Italic/etc..)

    I suppose it was one of those deals where they used INPUT for elements w/out
    children and others for stuff that interpreted it's child elements.

    Jamie
    --
    http://www.geniegate.com Custom web programming
    (rot13) User Management Solutions
    , Dec 25, 2004
    #8
    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. Gerald Aichholzer
    Replies:
    2
    Views:
    2,482
    Gerald Aichholzer
    Jun 27, 2006
  2. Peter Ballard
    Replies:
    6
    Views:
    391
    Peter Hansen
    May 27, 2004
  3. Michael Chermside
    Replies:
    1
    Views:
    330
    Roy Smith
    May 26, 2004
  4. Replies:
    1
    Views:
    109
  5. Replies:
    4
    Views:
    178
Loading...

Share This Page