CODEWITHSUNDEEP
javascripthtmlcss
MR.ABC
MR.ABC

Reputation: 4862

customize radio box like in my concept

What is the best way to customize a radio box like this. It should be for ie10, chrome, firefox. I cant make everything by by own with css and javascript. is there a better way ?

concept:

enter image description here

Upvotes: 2

Views: 107

Answers (2)

nice ass
nice ass

Reputation: 16709

Hide inputs, and style labels:

input[type='checkbox']{
  display: none;
}

label{
  border: 1px solid #ddd;
  padding: 10px;
  position: relative;
  padding-left: 36px;
}

label::before{
  position: absolute;
  left: 10px;
  top: 10px;
  content: '';
  box-shadow: 0px 0px 2px #999;
  border: 2px solid #fff;
  width: 12px;
  height: 12px;
}

input:checked + label::before{
  background: #ccc;
}

DEMO

Upvotes: 4

Marcianin
Marcianin

Reputation: 461

I recently tried something like this and the following tutorials helped me http://css-tricks.com/snippets/css/custom-radio-buttons/ http://www.hongkiat.com/blog/css3-checkbox-radio/

In my case I used the background-image solution

Upvotes: 1

Related Questions