0

I am styling checkboxes purely in CSS. However, my styles work fine in chrome but it does not work in firefox. Here is my code

How can I make this work in both browsers?

input[type="checkbox"] {
    height:22px;
    width: 22px;
}
input[type="checkbox"]:before{
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #808080;
    content: "";
    background: #FFF;
    border-radius: 10px;
}
input[type="checkbox"]:after{
    position: relative;
    display: block;
    left: 2px;
    top: -20px;
    width: 16px;
    height: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
    content: "";
    background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
    background-repeat: no-repeat;
    background-position:center;
    border-radius: 10px;
}
input[type="checkbox"]:checked:after{
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
}
input[type="checkbox"]:disabled:after{
    /*-webkit-filter: opacity(0.4);*/
    opacity: 0.4;
}
input[type="checkbox"]:not(:disabled):checked:hover:after{
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
}
input[type="checkbox"]:not(:disabled):hover:after{
    background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);  
    border-color: #85A9BB #92C2DA #92C2DA #85A9BB;  
}
input[type="checkbox"]:not(:disabled):hover:before{
    border-color: #3D7591;
}
Om3ga
  • 30,465
  • 43
  • 141
  • 221
  • 1
    `input` elements have an empty content model, and that’s why using generated content with `:before`/`:after` is not _supposed_ to work on them. – CBroe Feb 16 '14 at 15:47
  • There are many solutions for “custom checkboxes” out there already … just go adapt one. – CBroe Feb 16 '14 at 16:18
  • @CBroe I already googled but could not find one which is particularly used with input[type="checkbox"]. I do not want to use classes and ids etc. So whenever developer use checkbox input in website, without css classes and ids, then they should get these styles by default. – Om3ga Feb 16 '14 at 16:27

1 Answers1

0

I've searched the internet for an explanation or fix to your problem and from what I have discovered this problem is not easily fixable. This problem is an old bug with firefox which has yet to be fixed.

Sadly, there is no uniform way of fixing your problem. However I have found a work around which i'm sure you can manipulate to suit your needs.

The best work around involves switching a few tags for divs and hiding the different button states. You can view it here http://jsfiddle.net/kSxBK/1 be sure to check out this one as well http://jsfiddle.net/V98W8/.

 <div id="milestone-table">
        <p>Checkbox</p>
        <label>
            <input type="checkbox"/>
            <label class="checkbox"/>
        </label>
    </div>

I'm not sure it's exactly what you are looking for but I hope your troubles subside.

All the best,

Henry

Cybus
  • 1