Style input fields with CSS3

Posted by Stephan Kristyn on June 5th, 2010 / No Comments

Usually when you want to further individualize osCommerce, for e.g. after utilizing the Simple Template System you go into the source files and alter them.

If you wanted to change the style of your graphical buttons in your shopping card or the look of the form fields for e.g. at login or checkout you would go into catalog/includes/functions/html_output.php and give them a css class identifier.

<input type="image" class="myNewClass" src="' . tep_output_string(..
I used a different approach utilizing CSS3, which I defined directly in my sts_template.html file.

input[type="text"] {
    /* you know what to do */
}

input[type="button"],input[type="submit"] {
    /* you know what to do */
}

With this technique tampering with the html_output.php shouldn’t be necessary anymore -at least for the task I wanted to accomplish.

These selectors are only working in more advanced browsers and are called Simple attribute selectors. More advanced attribute selectors are using regular expressions and work for e.g. like this:

input[type^="sub"]
/* matches occurrences of the type attribute
     where 'sub' is the beginning of the value */

input[type*="ubmi"]
/* matching string can be anywhere inside
     the type attribute of input */

input[type$="mit"]
/* matches all values that end with 'mit'
     of the type attribute inside input tags */