把指纹的单选按钮放在bootstrap中

Question

Is it possible to integrate radio buttons with a hand image for fingerprinting in Bootstrap ? Is it possible to have an exact positioning for radio buttons to put just upper each finger and it stay unchanged for popular browsers ( IE, Firefox and Chrome )? Indeed, I want something like this:

Answer 1

To get this done you can use technique of element absolute positioning (radio-button) within parent element (image container).

/* 
  Set container position to relative
  Note: This will not affect parent's current position
*/

.image-container {
   position: relative;
}

/* 
   Now all children with position: absolute 
   would be position within their parent 
*/

input[type="radio"] {
  position: absolute;
  top: 50%;
  left: 40%;
}

For more details please take a look at the DEMO I have created. It also includes transparent labels so clicking on the finger will actually select a radio button.