UBB.Developers Forums Community Development Programming HTML, CSS, and JavaScript Changing form elements using CSS

This is mainly intended for use on my Ubb although the knowledge could be very useful.

I understand using CSS that I can change the colour's of form element's such as radio box's and button's.
Currently I am testing the CSS to get the right look within my form's but I have a problem.
I am using the below code to colour in my forum button's:
_________________________

INPUT {
background:rgb(255,0,255);
color:rgb(0,0,0);
border-style:solid;
border-color:rgb(0,0,0);
border-width:2px;
}
_________________________

If you ignore the colour's you will see that it does infact change the colours of the button's but it also changes the radio button's colour etc too which I dont want.

What code would I have to use within my CSS so that it only effect's the button's on my Ubb such as "Add reply" "Add New Topic" "Spell Check" "Add Reply" etc.

If you look at the CSS and also at the HTML, you'll realize why things happen as they do. The code you posted says to take all INPUT elements and style them with the given properties. OK, good.

However, the INPUT element includes many different form controls, so you have to be careful in how you use it. We're talking about text fields, password fields, checkboxes, radio buttons, submit buttons, reset buttons, and even a couple of other kinds of buttons. To be blunt, there's no easy way around this to do what you're trying to do.

You'll have to make a class and then edit the templates manually, applying to class only to the elements that you want styled. Hope this gets you started in the right direction.

Yeah I read about the modifying part.
What files contain the templates for the posting sheets ie the ones with the buttons and how do I make a class for them?

So Id open up the file find the forum buttons and add something in like class="blag"

And in my css rather than put input Id type blag?

Am I in the right direction.

It's been awhile since I've edited the files, but I believe that you'll need to open up /nonCGI/Templates/public_new_topic_form.pl, public_new_reply_form.pl, and public_edit_post.pl.

Here's an example of your code made into a class and condensed. I can see you've got some reading to do.
[code][/code]

Ok I think Ive got it:

[code][/code]And added the class type above!

Is this what Id have to add to every single form which has a button in?

And after that I just add to my css class=button rather than strictly input?

Hope Im in the right area.

input & select & textarea are pre-declared classes in css. Think it like this;

when you use

input {
/* ... */
}

in your css, you have to use a "input" tag to use this style. And when you define a class named "showSomeClass" you have to put it somewhere in your html to use it.

As a result; if you want to use a user-defined class for your input tag, you must use it in every input tag:

Yeah I know thats what I was getting at butthanx man.

yes, they are elements... sorry...