2 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

well i recently learnt to customize checkboxes .

hers what i did : http://jsfiddle.net/d253kwox/

i have a few questions though .

glance through the code , you will see that the original checkboxes are hidden using the following code :

[type="checkbox"]:not(:checked),  
[type="checkbox"]:checked{
  position: absolute;
  left: -9999px;
}

is that a good thing to do ?

2nd question . notice that if you go to the following line of css code :

[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  width: 17px; height: 17px;
  border: 1px solid #eee;
  /*background-color: #;*/
  left: 0;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}

the property content='' , plays a important role , without that property , nothing would appear . Why ?? what is that property really doing ?

and lastly my 3rd question , see code below :

[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: 2px; left: 2px;
  font-size: 18px;
  color: #09ad7e;
  transition: all .2s;
}

how did the author of this code get the tick mark in there ? how do i re-create it ? i mean the tick mark ??

Thanks.

gautam.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 3 hours 47 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9757
Points: 3839

Should have mentioned these links before

See Unicode Character Name Index and Free Online Unicode Character Map.

I keep both open in tabs at all times.

The check is likely either ✓ or ✔

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 36 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks gary

That was quite kind of you . Steve