Modifying all form elements - how?

J

Joshua Beall

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
 
P

paul

Joshua said:
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;}
 
S

Steve Pugh

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
 
J

Joshua Beall

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?
 
S

Steve Pugh

Joshua Beall wrote:
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
 
J

Joshua Beall

Steve Pugh said:
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... ?
 
N

Neal

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 {}
 
G

Guest

Joshua Beall said:
Steve Pugh said:
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
 

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,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top