-1

I have a table which a column of this table is only radio boxes. I want to style the radio box with the following images: http://i66.tinypic.com/28ipw1s.png http://i64.tinypic.com/2ur1b88.png

or just style it so it will look normal and not the default styling of the browser. The problem is that the solution for display the images above can be achieve by using labels and labels take space in the table which I don't want to give up. This is my table: enter image description here

I can't add any labels and I don't want any label next to my radiobox. This is the solution which I am familiar which doesn't work with empty labels.

input[type="radio"]{
        width: 28px;
        margin: 0;
        padding: 0;
        opacity: 0;
    }

    input[type="radio"]+label{
        display: inline-block;
        padding-left: 28px;
        line-height: 24px;
        background: url(http://i66.tinypic.com/28ipw1s.png) no-repeat 0 0;
    }

    input[type="radio"]:checked + label{
        background: url(http://i64.tinypic.com/2ur1b88.png) no-repeat 0 0;
    }
dippas
  • 58,591
  • 15
  • 114
  • 126
Brk
  • 1,247
  • 2
  • 23
  • 55
  • You can style the label you want to... – Rayon Mar 13 '16 at 16:33
  • yea but it will take space inside my table and this is my first problem. I want to use empty label but all solutions works only with non empty labels. – Brk Mar 13 '16 at 16:34
  • An image takes space as well, but I believe there's a way that when using the label, it is actually occupying the same space as the radio button/image. – zer00ne Mar 13 '16 at 16:49

1 Answers1

1

Something like this?

input[type="radio"] {
  width: 17px;
  margin: 0;
  padding: 0;
  background: url(http://i66.tinypic.com/28ipw1s.png) no-repeat 0 0;
  -webkit-appearance: none;
  appearance:none;
  -moz-appearance:none; 
  display: inline-block;
  height: 17px; 
  outline:none;
}

input[type="radio"]:checked {
  background: url(http://i64.tinypic.com/2ur1b88.png) no-repeat 0 0;
}
<input type="radio" name="" value="">
NiZa
  • 3,806
  • 1
  • 21
  • 29