How to style radio button and checkbox

Hello there, hope you are doing well! Today I am going to present how to style radio button and checkbox.

Ever wondered! to customize radio button and checkbox, but without JavaScript? Thanks to CSS3 you can! With CSS3 we can customize web presentations to be almost anything we want it to be. In this post, as the title says, I am going to customize the look of radio button and checkbox.

How to style radio button and checkbox

DOM structure for Radio button

<label class="custom-radio-button">
 <input type="radio" /> 
 <span class="helping-el"></span>
 <span class="label-text">Customize</span>
</label>

CSS for customize Radio button

label.custom-radio-button input[type="radio"] {
	opacity:0;
}

label.custom-radio-button input[type="radio"] ~ .helping-el {
	background-color: #FFFFFF;
	border: 2px solid #009688;	
	border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
    padding: 11px;
    position: relative;
    top: 3px;
}

label.custom-radio-button input[type="radio"]:checked ~ .helping-el {
    border: 2px solid #009688;
}

label.custom-radio-button input[type="radio"]:checked ~ .helping-el:after {
	background-color: #009688;
    border-radius: 50%;
    content: " ";
    font-size: 33px;
    height: 16px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 16px;
	
}

DOM structure for Checkbox

<label class="custom-checkbox">
 <input type="checkbox" /> 
 <span class="helping-el"></span>
 <span class="label-text">Customize</span>
</label>

CSS for customize Checkbox

label.custom-checkbox input[type="checkbox"] { 
	opacity:0;
}

label.custom-checkbox input[type="checkbox"] ~ .helping-el{
	background-color: #FFFFFF;
	border: 2px solid #009688;	
	border-radius: 2px;
    display: inline-block;
    padding: 10px;
    position: relative;
    top: 2px;
}

label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el{ 
	border: 2px solid #009688;
	background-color: #009688;
}

label.custom-checkbox input[type="checkbox"]:checked ~ .helping-el:after {
    color: #FFFFFF;
    content: "\2714";
    font-size: 20px;
    font-weight: normal;
    left: 2px;
    position: absolute;
    top: -6px;
    transform: rotate(10deg);
}

Conclusion

Alright, so how cool it is, right?:)

BTW: This technique to customize radio button and checkbox input type and certainly you can enhance the look to be more stunning.

Web design trends for 2016

Just like any other field there are trends in Web Design. Some will change with the passage of time and some will go with out any change.

2015 has been an interesting year for Web Designers. Now let see how 2016 will be for Web Designers.

  • Designers takes inspiration from mobile devices  and started simplifying navigation and hiding it under a hamburger menu. It’s a trend that’s also crept into the desktop version of websites. Placing navigation under a hamburger menu makes a site cleaner and most people are now used to with this. But this isn’t something that works for every site and can reduce discoverability. This is not good for e-commerce sites and news sites, where discoverability of topics and items is critical to the experience.
  • 2016 will also the year of Responsive Web Design. More companies will switch their website to responsive design. So, this year we will see more responsive designs with innovation.
  • Some Web designers design only in the browser. There are benefits to this: cuts development time down, allows you to see the limitations and reactions of the actual browser with regards to the design.  It’s common for Web designers to know how to code at least the front end of websites (HTML/CSS/JS), so designing in the browser makes sense to them.
  • We should all be thanking Google for its  free font collection. Because of the company’s library, utilizing a great looking typeface on a limited budget can be achieved. With varying styles, weights, families, and the like, there is sure to be quite a few typefaces that are suitable for any website.
  • More sites and apps are going with the full-screen forms and input screens instead of it existing in only one small part of the site. Click on “login” and or “contact” and you may be greeted with a full-screen overlay with the form needed instead of being sent to a different page. This trend will be follow in 2016.
  • Carousels seem to be everywhere. They can add visual interest and reduce clutter. But few things to consider like carousels are bad for SEO, because there is no HTML content in carousels. The lack of content means that it’s difficult to get meta information into a page. Most sliders though contain headers that are wrapped in H1, and these change when the slider does and as such, devalue keywords within them.
  • There has been a bit of a revolution over the past twelve months in the form of the adoption of Google’s Material design as a basis for UI presentation and development. This trend reflects the move toward smartphones as the principle and first device used to access the web, over and above the desktop or laptop computer. Expect to see the Material appearing in user interface design across the web, much as happened with Bootstrap in the past.
  • With responsive design pretty much taken over the Web, expect flat design to continue to be a dominate design aesthetic throughout 2016. Not only will there be websites that launch with flat designs, those sites who’ve already embraced the flat design trend will look to make things even flatter.
  • In 2016 I can expect more use of Java Scripts.  JavaScript can be highly functional in that it can be used for many things that other languages can’t. It can help you create great load screens, for example, and other styling elements such as sliders, adding functionality. but, JavaScript can slow down a good site and, users won’t stick around if a site is too slow. There’s nothing wrong with JavaScript. It has a lot of great uses and allows us to do some nifty things on the web. But, you should reduce the amount of JavaScript you use so that it doesn’t make your site painful to view on a mobile device.

 

© copyright https://www.linkedin.com/pulse/web-design-trends-2016-farhan-khan

How to compile SASS to CSS in Compass

Step 1:
Go to http://rubyinstaller.org/ and download ruby.

Step 2:
In the installation when you go through “Installation Destination and Optional Tasks” step you should check the second and third option.

Step 3:
When the installation is finished you should open command prompt(cmd)

Step 4:
Then install  first “gem install compass” second “gem install sass”.

Step6:
Then go to your project folder like: “D:Projects\Content\styles” and create a file “config.rb” and write in the file.

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = ""
sass_dir = ""
images_dir = ""
javascripts_dir = ""

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss &amp;&amp; rm -rf sass &amp;&amp; mv scss sass

Step 7:
After all the above is finished
in cmd navigate to that same path where you’ve put the config.rb and just type “compass watch”. it will listen for changes in the scss files

Follow

Get every new post delivered to your Inbox.