Checkbox having some extra pixel value in Android device browser

Question

I have customized the html checkbox with applying some css. In that I'm used the checkbox border is 1px solid. But in the left and top of the border, checkbox having some amount of pixel which is larger than the right and bottom of the checkbox. While inspecting the element in the device, It's shows the border 1px solid value only.

Checkbox border issue

How to resolve this issue.?

EDIT 1: CSS used for checkbox:

   .rootel {
      height: 12px;
      width: 12px;
      float: left;
      border: 1px solid #333333;
    }
    .rootel .innerel.active{
       background-position: 0 -4px;
       background-repeat: no-repeat;
       float: left;
       height: 20px;
       left: -3px;
       position: absolute;
       top: -5px;
       width: 22px;
     }

Have you tried to reset all other properties that could make this happen? Like `outline`, `box-shadow`, … — LeBen, Dec 23 '13 at 10:11
Yes. I have set outline, -webkit-appearenace and -webkit-box-shadow to none. But still the issue exists only. — Karthick, Dec 23 '13 at 10:13
Since Android 4 box-shadow is unprefixed. Have you reseted `box-shadow` as well? — LeBen, Dec 23 '13 at 10:25

Just code · Answer 1 · 2013-12-23T10:55:45.753

0

I don't know what issue you have as you don't have put any code so i have tried my self

and interestingly i found no issue

Checkout here

I have positioned absolute if i want to apply border to element with div extra applied behind it please note that this can be archived through z-index only other wise check-box will not be clickable

I think there is probability of margin of some 0.03 pixels

In a desktop browser it seems ok but its not solved in android browsers

edited Dec 23 '13 at 10:55

answered Dec 23 '13 at 10:18

Just code

13,553
10
51
93

I have pasted the css in my question. Please check and suggest to resolve the issue. – Karthick Dec 23 '13 at 10:29
Please check out this. http://jsbin.com/AxadoDI/1. In the class active. checkbox image is placed inside the box. – Karthick Dec 23 '13 at 10:42
It seems no issues there – Just code Dec 23 '13 at 10:44
In desktop browser, there is no issue at all. The issue exists only in android device browser only. http://stackoverflow.com/questions/13415412/why-does-a-css-border-look-different-on-android?rq=1. http://stackoverflow.com/questions/18146195/double-width-borders-on-android-devices-with-a-css-pixel-ratio-of-1-5. These links deals the same with no answers resolved. – Karthick Dec 23 '13 at 10:52
So, is this a issue in android browser? – Karthick Dec 23 '13 at 10:58
Ya i found it its can not be possible – Just code Dec 23 '13 at 11:00
Welcome @Karthick i don't confirmed yet – Just code Dec 23 '13 at 11:03

Checkbox having some extra pixel value in Android device browser

1 Answers1