Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Modifying all form elements - how?

Reply
Thread Tools

Modifying all form elements - how?

 
 
Joshua Beall
Guest
Posts: n/a
 
      12-13-2004
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


 
Reply With Quote
 
 
 
 
paul
Guest
Posts: n/a
 
      12-13-2004
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;}
 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      12-13-2004
On Mon, 13 Dec 2004 17:33:23 GMT, "Joshua Beall"
<(E-Mail Removed)> 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

 
Reply With Quote
 
Joshua Beall
Guest
Posts: n/a
 
      12-13-2004
"paul" <(E-Mail Removed)> wrote in message
news(E-Mail Removed)...

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


 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      12-13-2004
On Mon, 13 Dec 2004 09:51:48 -0800, paul <(E-Mail Removed)> 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

 
Reply With Quote
 
Joshua Beall
Guest
Posts: n/a
 
      12-13-2004
"Steve Pugh" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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... ?


 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      12-13-2004
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 {}
 
Reply With Quote
 
nospam@geniegate.com
Guest
Posts: n/a
 
      12-25-2004
Joshua Beall <(E-Mail Removed)> wrote:
> "Steve Pugh" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>> 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
http://www.velocityreviews.com/forums/(E-Mail Removed) (rot13) User Management Solutions
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
newb: recurse over elements children and disable all form elements SteveKlett@gmail.com Javascript 4 09-20-2006 07:42 AM
XSLT: iterating all child elements and accessing homonymous childrenin sibling elements Gerald Aichholzer XML 2 06-27-2006 03:46 PM
To allow left click only on some elements of web page NOT all elements vikas.khengare@gmail.com Javascript 1 05-31-2006 09:26 AM
modifying mutable list elements in a for loop Peter Ballard Python 6 05-27-2004 01:36 AM
RE: modifying mutable list elements in a for loop Michael Chermside Python 1 05-26-2004 02:17 PM



Advertisments