background preloader

Styling Checkboxes and Radio Buttons With CSS and JavaScript

Styling Checkboxes and Radio Buttons With CSS and JavaScript
This JavaScript and CSS will allow you to use custom images to style checkboxes, radio buttons and 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. The example This script is stand-alone and does not require jQuery or other library to work. View a more comprehensive example 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. Download the full script Download the CSS file The CSS The HTML Checkbox

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

Related:  CSS/SCSSHTML

Layout — Chapter 2 — Magic of CSS — Adam Schwartz In the previous chapter, we learned that each element in the page is a rectangular box. In this chapter, we will see how multiple boxes get laid out on a page. Block, inline, and inline-block With respect to layout, the display property has three values you should be most concerned with. Here are the main differences between how these three display types get laid out: Create a Custom Select Box with jQuery In this tutorial I will be teaching you how to transform boring select boxes into well styled form elements that are perfect for custom web applications. Using custom form elements such as select boxes can give your website a unique feel and make it stand out from the crowd. By the end of the tutorial you will have a fully functioning custom select box. The HTML Code Firstly lets go over the HTML required for a normal select box.

Call to Action Buttons: Examples and Best Practices - Smashing Magazine Advertisement Call to action in web design — and in user experience (UX) in particular — is a term used for elements in a web page that solicit an action from the user. The most popular manifestation of call to action in web interfaces comes in the form of clickable buttons that when clicked, perform an action (e.g. "Buy this now!") ISO country list HTML select snippet Included in this page are the HTML select/dropdown code snippets to generate a list of countries using the ISO-3166-1 and ISO-3166-2 codes. You can choose between ISO-3166-1 Alpha-2, ISO-3166-1 Alpha-3, ISO-3166 Numeric or the latest ISO-3166-2 codes. Consult the ISO-3166 Wikipedia page for more details. Some country names have accents and other non-ascii characters, so make sure to set your HTML page's encoding properly. UTF-8 works perfectly for this.

The Web Design Process Start to Finish I've always found it interesting reading the design process of others (David Airey, Contrast, Brian Hoff). It's good to have an insight into others work, to see if I can learn anything from their process but also for curiosity. So I've put together a break down of my design process, using a recent project as a real life example, Newsgroup Direct.

How To Create a Trendy Flat Style Nav Menu in CSS I’ve heard from a bunch of people who found my CSS drop down menu tutorial really useful, so today’s we’re going to build another menu with some fancy hover effects. With the Flat design trend being so popular we’ll use adopt this style for today’s menu by using bright solid colours and clean icons. We’ll be using various must-know CSS techniques so this is a great tutorial for any web designers learning the basics. Here’s the menu we’ll be building as part of this tutorial.

Top 5 Considerations for Transitioning from Flex to HTML5 - Mindshare - Universal Mind The web application landscape has shifted rapidly in the past six months. Due to Adobe’s changing view of the Flash Platform, many companies who have relied on technologies like Flex are looking to migrate to HTML5. This transition can be tricky both for an organization as well as its developers. Following A Web Design Process - Smashing Magazine Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how developing a process for Web design can organize a developer’s thoughts, speed up a project’s timeline and prepare a freelance business for growth. First of all, what exactly is a ‘process’?

Interactive Photo Desk with jQuery and CSS3 In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act. For example, if we drag a picture, […] View demoDownload source In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. Create CSS 3D Transform Card Flip Gallery Introduction CSS 3D is the new black. There are many CSS tutorials and cool demonstrations out there and if you want to learn this cool new feature, you can check out one of our posts - Embrace the awesome CSS 3D transform.

JavaScript Performance Best Practices This article gives valuable guidance for building faster web applications. The article is a collection of guidelines from various sources. Case study: Tips and tricks for improving JavaScript performance 30 Beautiful Real Estate Websites - Smashing Magazine Advertisement Real estate is a valuable and often expensive purchase. Copious research is done by home buyers before venturing out to acquire real estate.

Related:  javascript/JScript/JScript.NET