15 Ways to Improve CSS Techniques Using jQuery

CSS is great and when it is combined with powerful JavaScript frameworks like jQuery, you can achieve some really amazing things. Combining these two together will let you enhance the user experience by providing more intuitive and responsive web interface. Here are 15 ways you can use jQuery to improve CSS techniques.

1. Custom Styled Radio Buttons and Checkboxes

It is always hard and next to impossible to customize style of radio buttons and checkboxes. But using jQuery we can easily customize the radio buttons and check boxes to make them more user friendly. Here are two different ways to stylize them:

Custom Designed Checkbox and Radio Buttons


Radio Button and Checkbox replacement.

2. Setting Equal Heights with jQuery

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. Here’s the jQuery way to set equal height of multiple elements using the equalHeights plugin. With this plugin, you can make equal height columns with just a single line of code.

view plaincopy to clipboardprint?

1. $("someselector").equalHeights();  

3. Styling Select Elements

<select> is another HTML element that is not easy to customize using CSS, but with jQuery at our disposal, we can certainly make them look cool and usable.

jQuery UI Selectmenu
This is a plugin for jQuery UI that lets you customize select elements easily.

jQuery image dropdown

4. Current Field Highlighting in Forms

It is always good to provide a visual feedback to users when they perform any action while using a web form. Highlighting the field in which user is currently typing is one of the usability features you should add to web forms. Though, this can be achieved using the :focus pseudo selector in CSS. But this technique of highlighting the label along with the selected input field from CSS Tricks provides good user experience.

5. Fix IE Overflow problem

Internet Explorer has this rather strange problem, when overflow is set to auto or scroll, the scrollbar shows up inside the width of element. This is fine when you have multiple lines of text within that element, but if you just have a single line of text, then scrollbar would cover that and it won’t be visible. This jQuery technique from Remy Sharp will fix that IE bug.

6. Block Hover Effect

Creating block hover effect with CSS using display:block is possible but when you have some other content inside a box alongside the link, then it is not possible to create a semantically correct block hover effect using CSS. Here’s a nice jQuery plugin – Bigger Link to achieve that.

7. Rounded Corners

CSS Rounded corners are now supported by most browsers like Firefox, Safari but some browsers like IE do not support them. For those unsupported browsers, you can use jQuery Curvy Corners.

8. Attractive Menus with jQuery

Creating a CSS based navigational menu that displays hover state separately is not difficult, but with a little amount of jQuery you can achieve some really nice effects. Check out these two example menus that use jQuery to produce a very subtle hover effect.
Create an Attractive jQuery Menu with Fade In and Fade Out Effect

Animated Menu Using jQuery

9. Creating a Floating HTML Menu Using jQuery and CSS

You can fix the position of an element using the position:fixed property but that won’t provide as rich user experience as Live floating menu using jQuery. It creates a floating menu on the page and as you scroll down, menu also follows your mouse scroll.

10. Splitting Content over multiple columns

Ever thought of splitting text of a page into multiple columns just like newspaper. With CSS, this will take a lot of effort but this Columnizer jQuery plugin will do all the effort for you to split content into multiple columns with a single line of code.

11. Semantic Blockquotes with jQuery

If you use blockquotes in your design to highlight important points of an article, then you also duplicate the content within blockquotes as it is also there in the article. Here’s a nice jquery wayto do this leaving the duplication of content to jQuery by specifying which content to show as blockquote.

12. Text Shadows

CSS3 includes a nice property of text-shadow that allows you to set a text-shadow generate nice text-effects without using any images. But IE does not support this feature till date. Text-shadow in IE adds this support to Internet Explorer using jQuery.

13. Border Image

CSS3 lets you use images as border backgrounds in addition to just colors. But since it is not supported my many browsers, you’ll need jQuery to come to rescue. jQuery.borderimageprovides cross-browser support for border-image property.

14. Opacity

Opacity is one such CSS property which is supported by most browsers including IE but each has a different way to implement it, though CSS3 standard defines a property opacity to be used for setting opacity of elements, but you end up writing many lines of CSS code just to make opacity cross-browser compatible. jQuery can make this easier too.

view plaincopy to clipboardprint?

1. $("someselectoe").css("opacity", 0.5);  

15. Super CSS Selector Support with jQuery

CSS 2.1 supports various types of selectors including :focus, :first-child, nth-child but not all browsers(IE!) support these selectors. but with Super CSS Selector, you can be sure to have support for those selectors even in IE.