Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Styling any form input

Form styler class can be used to style form inputs using images. It is possible to use separate images or image sprites for each input. You can style single input element or all element types (for example textbox) inside provided container. It also copies all input defined style attributes and classes (but not ID defined styles)

This class only styles form elements or creates html elements which manipulate input values, so behaviour of form is not changed

Package contains form_styler.js and form_styler.packed.js (packed javascript), example file example.php(to show form styling example and behaviour) and images for example styling.

Contents

Download

Example codes

<html>
<head>
<style type="text/css">
button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }
</style>
</head>
<body>
<form id="myform" action="" method="post">
<p>Insert text: <input type="text" name="somename"/></p>
<p>Insert pass: <input type="password" name="somepass"/></p>
<p>More text: </p>
<p><textarea name="sometext"></textarea></p>
<p><input type="checkbox" name="chk" value="val" checked /> some checkbox</p>
<p><input type="checkbox" name="chk2" value="val2"/> some checkbox2</p>
<p><input type="radio" name="radio1" value="val1" checked /> some radio1</p>
<p><input type="radio" name="radio1" value="val2"/> some radio2</p>
<p>
    <select name="someselect" id="someselect">
        <option value="1" selected>one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
        <option value="5">five</option>
    </select>
</p>
<p>
    <select name="someselect2[]" id="someselect2" multiple>
        <option value="1">one</option>
        <option value="2" selected>two</option>
        <option value="3" selected>three</option>
        <option value="4">four</option>
        <option value="5">five</option>
    </select>
</p>
<p><input type="button" value="somebutton"/></p>
<p><input type="file" name="somefile"/></p>
<p><input type="submit" name="somesubmit"  value="submit"/></p>
</form>
<script type="text/javascript" src="./form_styler.js" ></script>
<script type="text/javascript">
var fs = new form_styler("myform");
fs.checkbox(
    {
        sprite:"./checkbox.png", 
        normal: "0px 0px", 
        selected: "0px 50px", 
        normal_hov: "0px 75px", 
        selected_hov: "0px 25px", 
        width: 19, 
        height: 24
    }
);
fs.radio(
    {
        sprite:"./radio.png", 
        normal: "0px 0px", 
        selected: "0px 50px", 
        normal_hov: "0px 75px", 
        selected_hov: "0px 25px", 
        width: 19, 
        height: 24
    }
);
fs.text(
    {
        sprite: "./input_field.png", 
        normal: "0px -3px", 
        focused: "0px 40px", 
        width: 236, 
        height: 30, 
        left: 10, 
        top: 5, 
        bottom: 5, 
        right: 10
    }
);
fs.password(
    {
        sprite: "./password.png", 
        normal: "0px -3px", 
        focused: "0px 40px", 
        width: 236, 
        height: 34, 
        left: 10, 
        top: 5, 
        bottom: 5, 
        right: 30
    }
);
fs.textarea(
    {
        sprite: "./textarea.png", 
        normal: "0px 256px", 
        focused: "0px -5px", 
        width: 352, 
        height: 252, 
        left: 10, 
        top: 5, 
        bottom: 5, 
        right: 10
    }
);
fs.button(
    {
        normal: "./button.png", 
        hover: "./button1.png", 
        click: "./button2.png", 
        width: 162, 
        height: 35, 
        left: 5, 
        top: 5, 
        bottom: 5, 
        right: 5
    }
);
fs.submit(
    {
        normal: "./button.png", 
        hover: "./button1.png", 
        click: "./button2.png", 
        width: 162, 
        height: 35, 
        left: 5, 
        top: 5, 
        bottom: 5, 
        right: 5
    }
);
fs.file(
    {
        normal: "./button.png", 
        hover: "./button1.png", 
        click: "./button2.png", 
        width: 162, 
        height: 35, 
        text: "Upload", 
        upload_text: "File: "
    }
);
fs.select(
    {
        id: "someselect", 
        normal: "./button.png", 
        select: "./button1.png", 
        list_bg: "#000", 
        width: 162, 
        height: 35, 
        left: 5, 
        top: 5, 
        bottom: 5, 
        right: 5
    }
);
fs.select(
    {
        id: "someselect2", 
        normal: "./button.png", 
        select: "./button1.png", 
        list_bg: "#000", 
        width: 162, 
        height: 35, 
        left: 5, 
        top: 5, 
        bottom: 5, 
        right: 5
    }
);
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew form_styler(id)
DescriptionCreates class instance with provided id of form input container, where form input can be found
Input parameters

string id - id of container of form inputs (for example if o form element)

Example inputvar fs = new form_styler("form_id");

Style checkboxes

Back to method list

Method namecheckbox(config);
Descriptionstyle checkbox input
Input parameters

json config - Json structure with configuration properties

  • string id - id of checkbox input, if not provided, then all checkboxes in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string selected - selected condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string normal_hov - mouse hovered over normal condition of element(optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string selected_hov - mouse hovered over selected condition of element(optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
Example inputfs.checkbox({sprite:"./checkbox.png", normal: "0px 0px", selected: "0px 50px", normal_hov: "0px 75px", selected_hov: "0px 25px", width: 19, height: 24});

Style radio inputs

Back to method list

Method nameradio(config);
Descriptionstyle radio inputs
Input parameters

json config - Json structure with configuration properties

  • string id - id of radio input, if not provided, then all radio inputs in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string selected - selected condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string normal_hov - mouse hovered over normal condition of element(optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string selected_hov - mouse hovered over selected condition of element(optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
Example inputfs.radio({normal: "./radio.png", selected: "./radio_sel.png", width: 19, height: 24});

Style text type inputs

Back to method list

Method nametext(config);
Descriptionstyle text type inputs
Input parameters

json config - Json structure with configuration properties

  • string id - id of text type input, if not provided, then all text type inputs in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string focused - condition when text cursor is inside element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
  • int top - padding from top in pixels where text should be(default: 0)
  • int bottom - padding from bottom in pixels where text should be(default: 0)
  • int left - padding from left in pixels where text should be(default: 0)
  • int right - padding from right in pixels where text should be(default: 0)
Example inputfs.text({sprite: "./input_field.png", normal: "0px -3px", focused: "0px 40px", width: 236, height: 30, left: 10, top: 5, bottom: 5, right: 10});

Style password type inputs

Back to method list

Method namepassword(config);
Descriptionstyle password type inputs
Input parameters

json config - Json structure with configuration properties

  • string id - id of password type input, if not provided, then all password type inputs in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string focused - condition when text cursor is inside element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
  • int top - padding from top in pixels where text should be (default: 0)
  • int bottom - padding from bottom in pixels where text should be(default: 0)
  • int left - padding from left in pixels where text should be(default: 0)
  • int right - padding from right in pixels where text should be(default: 0)
Example inputfs.password({sprite: "./input_field.png", normal: "0px -3px", focused: "0px 40px", width: 236, height: 30, left: 10, top: 5, bottom: 5, right: 10});

Style textarea inputs

Back to method list

Method nametextarea(config);
Descriptionstyle textarea inputs
Input parameters

json config - Json structure with configuration properties

  • string id - id of textarea input, if not provided, then all textarea inputs in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string focused - condition when text cursor is inside element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
  • int top - padding from top in pixels where text should be (default: 0)
  • int bottom - padding from bottom in pixels where text should be(default: 0)
  • int left - padding from left in pixels where text should be(default: 0)
  • int right - padding from right in pixels where text should be(default: 0)
Example inputfs.textarea({sprite: "./input_field.png", normal: "0px -3px", focused: "0px 40px", width: 236, height: 30, left: 10, top: 5, bottom: 5, right: 10});

Style button type inputs

Back to method list

Method namebutton(config);
Descriptionstyle button type inputs
Input parameters

json config - Json structure with configuration properties

  • string id - id of button type input, if not provided, then all button type inputs in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string hover - mouse hover condition of element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string click - mouse click condition of element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
  • int top - padding from top in pixels where text should be (default: 0)
  • int bottom - padding from bottom in pixels where text should be(default: 0)
  • int left - padding from left in pixels where text should be(default: 0)
  • int right - padding from right in pixels where text should be(default: 0)
  • bool show_value - show value of button (you may hide it if you are displaying it with image)(default: true)
Example inputfs.button({normal: "./button.png", hover: "./button1.png", click: "./button2.png", width: 162, height: 35, left: 5, top: 5, bottom: 5, right: 5});

Style submit type inputs

Back to method list

Method namesubmit(config);
Descriptionstyle submit type inputs
Input parameters

json config - Json structure with configuration properties

  • string id - id of submit type input, if not provided, then all submit type inputs in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string hover - mouse hover condition of element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string click - mouse click condition of element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
  • int top - padding from top in pixels where text should be (default: 0)
  • int bottom - padding from bottom in pixels where text should be(default: 0)
  • int left - padding from left in pixels where text should be(default: 0)
  • int right - padding from right in pixels where text should be(default: 0)
  • bool show_value - show value of button (you may hide it if you are displaying it with image)(default: true)
Example inputfs.submit({normal: "./button.png", hover: "./button1.png", click: "./button2.png", width: 162, height: 35, left: 5, top: 5, bottom: 5, right: 5});

Style file type inputs

Back to method list

Method namesubmit(config);
Descriptionstyle file type inputs
Input parameters

json config - Json structure with configuration properties

  • string id - id of file type input, if not provided, then all file type inputs in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string hover - mouse hover condition of element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string click - mouse click condition of element (optional) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
  • bool show_value - display text on button (you may hide it if you are displaying it with image)(default: true)
  • string text - text that should be displayed if show_value is true (default: '')
  • string upload_text - text that should be displayed when user selected file if show_value is true (default: '')
  • bool show_file - display selected file name together with upload_text if show_value is true (make sure that width of input is enough) (default: true)
Example inputfs.file({normal: "./button.png", hover: "./button1.png", click: "./button2.png", width: 162, height: 35, text: "Upload", upload_text: "File: "});

Style select inputs

Back to method list

Method namesubmit(config);
Descriptionstyle select inputs
Input parameters

json config - Json structure with configuration properties

  • string id - id of select input, if not provided, then all select inputs in provided container will be styled (default: '')
  • string sprite - path to sprite image. If sprite image is provided, then you must provide background positions for other input conditions. If sprite is not provided, then provide paths to images for other input conditions (default: false)
  • string normal - normal condition of element(required) , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • string select - condition when dropdown list is opened , provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int width - width of input in pixels, must be enough for image to fit it (default: 20)
  • int height - height of input in pixels, must be enough for image to fit it (default: 20)
  • int top - padding from top in pixels where text should be (default: 0)
  • int bottom - padding from bottom in pixels where text should be(default: 0)
  • int left - padding from left in pixels where text should be(default: 0)
  • int right - padding from right in pixels where text should be(default: 0)
  • bool show_value - display selected text(default: true)
  • string list_bg - background of drop down list. You may provide color in hex, rgb, rgba, hsl or hsla format or provide background image. If you are providing background image then provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '')
  • int list_top - where should top of dropdown list start in pixels(default: 0, means just under the select element)
  • int list_left - where should drop down list be positioned from left side in pixels(default: 0, means same as select element)
  • int list_width - minimal width of drop down list in pixels(default: 0, means is adjusted to longest value)
  • int list_height - fixed height of dropdown list in pixels(default: 0, means unlimited - all list elements are displayed)
  • string select_bg - background of selected elements of drop down list. You may provide color in hex, rgb, rgba, hsl or hsla format or provide background image. If you are providing background image then provide background position like '0px 0px' if sprite is provided, otherwise provide image path (default: '#d3d3d3')
  • string select_color - color of text of selected items in drop down list, any valid css color (default: '#808080')
Example inputfs.select({id: "someselect", normal: "./button.png", select: "./button1.png", list_bg: "#000", width: 162, height: 35, list_width: 162, left: 5, top: 5, bottom: 5, right: 5});

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Scripts.com
RATE ME!

Try it out and Rate on JSclasses.org

Support

JS classes support forum or comments below


You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus