Time for action — styling the styleable

  1. Open up your styles.css file. We'll start off by styling the fieldsets and legends:
    fieldset {
background: #fff;
border: 1px dotted #83b0ca;
margin: 10px 20px 0 20px;
padding:10px;
}
legend {
background: #bed6e3;
border:1px solid #8fb7cf;
color: #1C4257;
padding: 0 5px;
box-shadow:2px 2px 2px rgba(0,0,0,0.2);
}

    I've selected shades of blue that match the Aristo theme that I selected. If you chose a different theme, feel free to use different colors and styles to match your chosen theme.

  2. Next, we'll style some of the container elements we're using in the form:
    fieldset p {
margin: 0 0 10px 0;
}
fieldset ul {
list-style: none;
margin: 0;
padding: 0;
}
label {
display: block;
}
ul label {
display: inline;
width: auto;
}
p.buttons {
margin: 20px;
}
  3. Next, we'll add some styles to that text input and textarea so they match our Aristo form elements:
    input[type="text"],
textarea {
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
moz-border-radius: 3px;
moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
padding: 4px;
webkit-border-radius: 3px;
webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
width: 250px;
}
  4. And last, but not least, we'll style our buttons. The Aristo theme makes use of a nice blue gradient, so I'm going to use a gradient for my buttons. I'll have to write quite a lot of code for supporting all the browsers, but here it is:
    input[type='submit'],
input[type='reset'] {
background: rgb(185,224,245);
background: linear-gradient(top, rgba(185,224,245,1) 0%,rgba(131,176,202,1) 100%);
background: -moz-linear-gradient(top, rgba(185,224,245,1) 0%, rgba(131,176,202,1) 100%);
background: -ms-linear-gradient(top, rgba(185,224,245,1) 0%,rgba(131,176,202,1) 100%);
background: -o-linear-gradient(top, rgba(185,224,245,1) 0%,rgba(131,176,202,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(185,224,245,1)), color-stop(100%,rgba(131,176,202,1)));
background: -webkit-linear-gradient(top, rgba(185,224,245,1) 0%,rgba(131,176,202,1) 100%);
border: solid 1px #6e93b0;
border-radius: 2px;
box-shadow: rgba(0,0,0,0.15) 0px 1px 3px;
color: #1C4257;
cursor: pointer;
display: inline-block;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9e0f5', endColorstr='#83b0ca',GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eef3f8', endColorstr='#96b9d4',GradientType=0 );
font-size: 1em;
font-weight: bold;
height: 27px;
line-height: 26px;
margin-right: 5px;
moz-border-radius: 2px;
moz-box-shadow: rgba(0,0,0,0.15) 0px 1px 3px;
padding: 0 10px;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
webkit-border-radius: 2px;
webkit-box-shadow: rgba(0,0,0,0.15) 0px 1px 3px;
}
input[type='submit']:hover,
input[type='reset']:hover {
color: #0b1b24;
}
input[type='submit']:active,
input[type='reset']:active {
background: rgb(131,176,202);
background: linear-gradient(top, rgba(131,176,202,1) 0%,rgba(185,224,245,1) 100%);
background: -moz-linear-gradient(top, rgba(131,176,202,1) 0%, rgba(185,224,245,1) 100%);
background: -ms-linear-gradient(top, rgba(131,176,202,1) 0%,rgba(185,224,245,1) 100%);
background: -o-linear-gradient(top, rgba(131,176,202,1) 0%,rgba(185,224,245,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(131,176,202,1)), color-stop(100%,rgba(185,224,245,1)));
background: -webkit-linear-gradient(top, rgba(131,176,202,1) 0%,rgba(185,224,245,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#83b0ca', endColorstr='#b9e0f5',GradientType=0 );
}

    I'm adding a subtle text color change on hover and reversing the gradient when the buttons are clicked. Now, refresh the page in the browser and take a look at our beautiful form.

    Time for action — styling the styleable

What just happened?

We used the Pixelmatrix's Uniform jQuery plugin to style formerly stubborn and unstyleable form elements. We chose one of the pre-made themes and attached all relevant CSS and images to our page, then selected each type of form element we wanted to style and called the uniform() method. We then used our CSS skills to style the other form elements, a simple text input, a textarea, and some buttons, to match the theme we selected. The result is a gorgeous form that will look consistent across different browsers and will still work perfectly for users with JavaScript disabled.

Our own theme

Sure, this Aristo theme is nice, but what if it doesn't match our site? Do we have any other option? Of course we do! If none of the prebuilt themes match your site, you can make your own theme using your own styles and colors to match any site you'd like. In fact, Pixelmatrix has made it super easy. Here's how you do it:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.144.197