How to style a HTML form using classes?

Question

I'm trying to add styles to this form, but as I have other similar areas in a search (submit for example), I need to add classes in order to style this form using CSS. Any help would be much appreciated.

<perch:form id="contact" method="post" app="perch_forms">

<perch:content id="intro" type="textarea" label="Intro" textile="true" editor="markitup"     size="m" />

<div>
<perch:label for="name">Name</perch:label>
<perch:input type="text" id="name" required="true" label="Name" antispam="name" />
<perch:error for="name" type="required">add your name</perch:error>
</div>

<div>
<perch:label for="email">Email</perch:label>
<perch:input type="email" id="email" required="true" label="Email" antispam="email" placeholder="" />
<perch:error for="email" type="required">add your email</perch:error>
<perch:error for="email" type="format">check your email</perch:error>
</div>

<div>
<perch:label for="message">Message</perch:label>
<perch:input type="textarea" id="message" required="true" label="Message" />
</div>

<div>
<perch:input type="submit" id="submit" value="Send" />
</div>

<perch:success>
<perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" />
</perch:success>
</perch:form>

Uh...what? What issue are you having? What does it *currently* look like? What do you *want* it to look like? It's currently very unclear what you're asking right now in your question in its current state. — Mike Koch, Jul 16 '14 at 18:17
And what on earth is this 'perch' thing you seem convinced is HTML? — David Thomas, Jul 16 '14 at 18:18
Add class to element e.g. `Name` then style it in CSS like `.p-label { font-size: 12px; color: #444; }`. — Milan and Friends, Jul 16 '14 at 18:19
Perch is a CMS and this is the template. I need to style this form and it current has no style at all. When I used input[type=submit] the style was applied to every submit buttoms on the site (search for example). I want to add styes to this form. — note00, Jul 16 '14 at 18:21
Thanks mdesdev, that worked. And how could I apply that to style inputs and buttons on this form? Thanks a lot in advance. — note00, Jul 16 '14 at 18:25
same way.. just add a class to any single item you want to style. — rob, Jul 16 '14 at 18:27
Tks rob. How the css would look like for this "test-input" class to make the area with width 400px for example? — note00, Jul 16 '14 at 18:31
I'm having problems on how to add a class to input[type=submit], for example, in CSS — note00, Jul 16 '14 at 18:33

Michael · Accepted Answer · 2014-07-16T18:48:36.110

ID's and how you can use them

If you want to style just this form itself, you don't even need to add classes. Just preface each of your CSS selectors with the ID of the outermost containing element. For example...

This very first line is contains the entire form...

<perch:form id="contact" method="post" app="perch_forms">

Note that the above line has an ID specifically... id="contact" This ID is unique, ID's can only be used once per page, you can also name them whatever you want as long as they don't start out with a number.

By prefacing all of your CSS selectors with this ID, you will effect only the elements inside the element that the ID is attached to... You mentioned using input[type=submit] and that it changed every button on your site. Change that selector to this instead:

#contact input[type=submit] { }

The above selector will now affect ONLY the inputs with a type of submit that are contained inside the ID contact. It's important to note that the hash symbol - # - designates "ID" in your CSS Sheet.

Classes and how you can use them

If you must use classes, which is recommended for any styles that might be re-used elsewhere, then you simply need to add class="classname" to the element you want the class to apply to.

For example, if we wanted to change the color of the text in your submit button using a class, we might do this...

First we add a class to the html:

This... <perch:input type="submit" id="submit" value="Send" />

Becomes this... <perch:input class="whitetext" type="submit" id="submit" value="Send" />

Note the class="whitetext"

Then in CSS we would write:

.whitetext { color: #fff; }

Note that the period character designates a "class" in a CSS Sheet.

Combining ID's and classes

You can also combine both of these or even all three. This increases your specificity. For example...

#contact input[type="submit"].whitetext { color: #fff; }

The above selector will change the text color of an input element to white, ONLY if the input element has the type value of "submit" AND that same input also has to have a class of "whitetext" AND the input also is a descendant of an element that has the ID value of "contact".

Thanks a lot, Michael. The explanation was fantastic. Complete and didactic. The problem is solved. Greetings from Brazil. — note00, Jul 16 '14 at 21:09

score 0 · Answer 2 · answered Jul 16 '14 at 18:42

To Style the Submit Button

Example Code:

input#submit {
    color: #444444;
    text-shadow: 0px 1px 1px #ffffff;
    border-bottom: 2px solid #b2b2b2;
    background-color: #b9e4e3;
    background: -webkit-gradient(linear, left top,   left bottom, from(#beeae9), to(#a8cfce));
    background: -moz-linear-gradient(top, #beeae9, #a8cfce);
    background: -o-linear-gradient(top, #beeae9, #a8cfce);
    background: -ms-linear-gradient(top, #beeae9, #a8cfce);
}

input#submit:hover {
    color: #333333;
    border: 1px solid #a4a4a4;
    border-top: 2px solid #b2b2b2;
    background-color: #a0dbc4;
    background: -webkit-gradient(linear, left top,   left bottom, from(#a8cfce), to(#beeae9));
    background: -moz-linear-gradient(top, #a8cfce, #beeae9);
    background: -o-linear-gradient(top, #a8cfce, #beeae9);
    background: -ms-linear-gradient(top, #a8cfce, #beeae9);
}

To Style Input Feilds

Example Code:

input {
    font-size: 120%;
    color: #5a5854;
    background-color: #f2f2f2;
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    padding: 5px 5px 5px 30px;
    background-repeat: no-repeat;
    background-position: 8px 9px;
    display: block;
    margin-bottom: 10px;
}

input:focus {
    background-color: #ffffff;
    border: 1px solid #b1e1e4;
}

input#email {
    background-image: url("images/email.png");
}

input#twitter {
    background-image: url("images/twitter.png");
}

input#web {
    background-image: url("images/web.png");
}

You can read more here Styling HTML forms and here Style Web Forms Using CSS

You may even like FORMOID EASIEST FORM GENERATOR to make forms with common form feilds.

How to style a HTML form using classes?

2 Answers2

ID's and how you can use them

Classes and how you can use them

Combining ID's and classes