-1

Is there any way that i can select on css the labels that are for checkboxes only?

I am using this css code input[type="radio"], input[type="checkbox"] { position: absolute; left: -999em; }

label:before 
{ 
    display: inline-block; position: relative; top:0.25em; left:-2px; 
    content:''; width:25px; height:25px;
    background-image:url(formelements.png); 
}

input[type="checkbox"] + label:before 
{ 
    background-position: 0 -25px;
}         
input[type="checkbox"]:checked + label:before 
{
    background-position: 0 0 ; 
}
input[type="radio"] + label:before 
{ 
    background-position: -25px -25px;
} 
input[type="radio"]:checked + label:before 
{
    background-position: -25px 0;
}

If you want the image you can get it from here and also the guide i am following for the styling can be found here But the problem i am facing is that all my labels for all the inputs get affected. Is there a way to style only those labels that are for checkboxes?

Thanks in regards

Thanos
  • 3,039
  • 2
  • 14
  • 28
  • On first glance nothing seems wrong? Can you provide a link or create a fiddle: http://jsfiddle.net/ – dtech Apr 29 '13 at 07:22
  • Maybe this can help? http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css – Pieter VDE Apr 29 '13 at 07:23
  • The problem as i can see it is with the label:before . All my labels are getting changed, even the ones that i have for input of type text,password,tel etc. – Thanos Apr 30 '13 at 04:56

1 Answers1

0

Custom CSS for checkbox labels. Works in my case: 

.medview input[type="checkbox"][class="selectorThumbs"] + label:before {
    background: url('../icons/thumbs.png') no-repeat;
}
.medview input[type="checkbox"][class="selectorThumbs"]:checked + label:before {
    background: url('../icons/thumbs1.png') no-repeat;
}
Jacob
  • 3,580
  • 22
  • 82
  • 146