Border Radius And Box Shadow Have No Effect In Android 2.3.6

I ran my Phonegap app in three devices, Android 2.3.6, Android 3 and iOS7 . The problem is that on the Android 2.3.6 I see that the switch button using the jQuery switchery plugin

Solution 1:

According to you posted code, it seems you've missed the vendor-prefixes for box-shadow property.

Android 2.1-3.2 (and iOS 3.2-4.3) needs the -webkit- prefix to get the box-shadow to work:

-webkit-box-shadow: 01px3pxrgba(0,0,0,0.4);

Also, in order to create a circle by using border-radius, you need to set the radius of the circle as the half of the box dimension (width or height).

Hence, you should use the following:

border-radius: 15px;

For Android 2.1 and iOS 3.2 the -webkit- prefix is needed.

Getting all together

.switchery > small {
  background: #fff;

  -webkit-box-shadow: 01px3pxrgba(0,0,0,0.4);
          box-shadow: 01px3pxrgba(0,0,0,0.4);

  height: 30px;
  width: 30px;

  -webkit-border-radius: 15px; /* 30px / 2 */border-radius: 15px;         /* 30px / 2 */position: absolute;
  top: 0;
}