Checkboxes, Radio Buttons, Drop Down Menu Select Lists, Custom Form Elements, CSS Form Styling

The CSS

If you make your own images, you may need to change a few things in the cascading style sheet. In .checkbox and .radio, the height property should be one fourth of the height of the full size images. You also might have to change the width property in .select selector. You probably won't have to edit any other portions of the CSS, but regardless, this part is still straight forward.

1. .checkbox, .radio {
2.   width: 19px;
3.   height: 25px;
4.   padding: 0 5px 0 0;
5.   background: url(checkbox.png) no-repeat;
6.   display: block;
7.   clear: left;
8.   float: left;
9. }
10. .radio {
11.   background: url(radio.png) no-repeat;
12. }
13. .select {
14.   position: absolute;
15.   width: 158px;
16.   height: 21px;
17.   padding: 0 24px 0 8px;
18.   color: #fff;
19.   font: 12px/21px arial,sans-serif;
20.   background: url(select.png) no-repeat;
21.   overflow: hidden;
22. }

The XHTML

The script won't customize checkboxes, radio buttons or select lists unless you declare the styled class. Simply add class="styled" to any checkbox, radio button or option list and the JavaScript and CSS will take over from there.

URL : http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

jQuery: how to set focus in page load to any element in page

Here are 2 simple steps...to make it.
-----------------------------------------------------
Step:1  : Identify the element, you want to set focus
-----------------------------------------------------
<body>
<div id="mainwrapper">
<!-- container1 -->
<div id="container1" 
style="height:300px;width:500px;display:block;">
Lorem Ipsum is simply dummy text 
</div>

<!-- container2 -->
<div id="container2 
style="height:300px;width:500px;display:block;">
Lorem Ipsum is simply dummy text 
</div>

</div>
</body>

In the above html code, 
suppose we need focus to "container2".

-----------------------------------------------------
Step:2 : place this jquery snippet in ..
-----------------------------------------------------
<script type="text/javascript">
$(document).ready(function() {
   $('#container2').get(0).scrollIntoView();  
});
</script>



That's it... :-)