Showing posts with label Web Designing. Show all posts
Showing posts with label Web Designing. Show all posts

Thursday, 26 June 2014

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

Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements.

This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully. So go ahead, CSS form styling is this easy:
  1. <input type="checkbox" class="styled" />

The example

This script is stand-alone and does not require jQuery or other library to work. If you are using jQuery in your project, fear not! This will still work perfectly, but you don't need that extra bloat to have beautiful checkboxes and radio buttons.

How does it work?

In a nutshell, the JavaScript looks for every form element with class="styled" on it; hides the real form element; sticks a span tag with a CSS class on it next to the element; and, finally, mouse events are added to the span that handles the visual stages form inputs go through when they are clicked.
Custom Checkboxes Custom Radio Buttons
To get the checkboxes, radio buttons and select boxes to work properly, you'll need to change three variables in the script: checkboxHeight, radioHeight and selectWidth on lines 21-23. If you use the images I created, you won't have to change the variables, but if you make your own, chances are you'll have to. The checkboxes and radio buttons to the right are linked to transparent PNG images for you to use freely if you'd like. The first two variables are the height of a single stage of the checkbox and radio button, and the third is the width of the select box. You may need to spend a little time tinkering with the checkbox and radio button images so they don't twitch during different stages.
  1. var checkboxHeight = "25";
  2. var radioHeight = "25";
  3. var selectWidth = "190";


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 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.


  1. <input type="checkbox" name="a" class="styled" />

Radio button

  1. <input type="radio" name="radio" class="styled" /> Yes
  2. <input type="radio" name="radio" class="styled" /> No

Select list

  1. <select name="d" class="styled">
  2.   <option value="1">Option 1</option>
  3.   <option value="2">Option 2</option>
  4.   <option value="3">Option 3</option>
  5. </select>

onChange and other JavaScript events

This script utilizes JavaScript's onChange and other events. Because these events can only be used once, if you want to add more functions to an event, you will need to call them from inside my script.


You are free to share, alter and use this script commercially. Just leave the title, my name and website intact in the JavaScript script. This script is licensed under a Creative Commons license.

[Tutorial] Create Fixed Footer Using HTML and CSS Code | Web Designing Tuts

[Tutorial] Create Fixed Footer Using HTML and CSS Code | Web Designing Tuts

Thinking Of Creating A Fixed Footer For Your blog/site at the bottom ?
Quickly Grab this piece of code and Add Fixed Footer to your site Now..

Fixed Footer

#footer {

/* IE 6 */
* html #footer {
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');

[Tutorial] How to Change Colour Of Bullet Points Using CSS - Web Designing Tuts

Basically,When we try to add bullet points using html codes(i.e,Unordered Lists),they are displayed in black color.So how to Change color of bullet points.We have a Css trick for it !

How to Change Colour Of Bullet Points Using CSS - Web Designing

Applying CSS for Above Unordered Lists :

ul {
    list-style-type: square;
    list-style-position: outside;
    list-style-image: none;
li {
li span {
And Here is the Output after Applying the above CSS Code :
  • one
  • one
  • one
  • one
Note :
You can Change 
list-style-type: to Circle etc to Get Bullets Shape of Your Choice..

Eg for list-style-type:circle
  • one
  • one
  • one
  • one

Hope You Liked This Tutorial,Stay Tuned for More..Still Any Doubts..Feel Free to Post Comments below..

Difference Between Div ID and Div Class -CSS Tutorials Learn HTML

Let us Learn the basic difference between div class and div id in css tutorials today.We need ways to describe content in an HTML/XHTML document. The basic elements like <h1>, <p> and <ul> will often do the job, but our basic set of tags doesn't cover every possible type of page element or layout choice. For this we need ID's and Classes. For example <ul id="nav">, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example a footer, where we might do something like this: <div id="footer">. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way: <div class="sidebar-box">.
Difference Between Div ID and Div Class -CSS Tutorials Learn HTML
These ID's and Classes the "hooks" we need to build into markup to get our hands on them. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too. But what is the difference between them?

ID's are unique

  • Each element can have only one ID
  • Each page can have only one element with that ID
When I was first learning this stuff, I heard over and over that you should only use ID's once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good "rule of thumb" to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don't seem to do anything different.
Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one. We'll go over more reasons for uniqueness as we go on.

Classes are NOT unique

  • You can use the same class on multiple elements.
  • You can use multiple classes on the same element.
Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple "widgets":
<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>
You can now use the class name "widget" as your hook to apply the same set of styling to each one of these. But what if you need one of them to be bigger than other other, but still share all the other attributes. Classes has you covered there, as you can apply more than one class:
<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>
No need to make a brand new class name here, just apply a new class right in the class attribute. These classes are space delimited and most browsers support any number of them (actually, it's more like thousands, but way more than you'll ever need).

There are no browser defaults for any ID or Class

Adding a class name or ID to an element does nothing to that element by default.
This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn't work.
Classes and ID's don't have any styling information to them all by themselves. They require CSS to target them and apply styling.

Have any Queries,Post Your Comments Below !