0

I have created website where I have radio buttons.

When I look them in Chrome, they looks fine.

But when I open them in IE, they looks like checkbox. They have square radio.

I tried with below CSS, 

.radio, input[type=radio] {
    border: none;
    box-shadow: none;
}

but still the square part is there. I don't know whether its shadow or something else.

You can check that at

http://www.smartprojects-kw.com/faces/survey.xhtml

Fahim Parkar
  • 30,974
  • 45
  • 160
  • 276

2 Answers2

1

On inspecting your code, it seems the problem is because of background attribute not box-shadow/border.

input[type=checkbox], input[type=radio] {
background: #999;  //------ Reason for problem
height: 16px;
width: 16px;
display: inline-block;
padding: 0 0 0 0px;
}

Remove the background attribute, it will be not shown.

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • @FahimParkar Oh you got it. I thought of adding a screenshot. Anyway glad to help you :) – Praveen Sep 04 '13 at 07:39
  • I had that in my survey.xhtml file. I was looking in my CSS file ;) sometimes eyes don't catch everything... :D :P – Fahim Parkar Sep 04 '13 at 07:44
  • @FahimParkar Yup, usually happens. This is where the **developer tools** of browsers gives the **rescue hand** ;) – Praveen Sep 04 '13 at 07:47
0

Just insert these piece in your Code

input[type="radio"] {                        
    border: 0px ;
}

Or Do this

you have to add a CSS class "check" ..

<input class="check" type ....

and in the styles.css ...

input.check {
    background-color: transparent;
}

Hope this will help you out..

Venugopal
  • 1,888
  • 1
  • 17
  • 30
coolprarun
  • 1,153
  • 2
  • 15
  • 22
  • `!important` isn't a good solution, it may break other other styles. If you get some time, check http://stackoverflow.com/a/5701193/1671639 – Praveen Sep 04 '13 at 07:40
  • Oh k k fine i just inserted the solution for the question.. anyway thanks for correcting it @user1671639 – coolprarun Sep 04 '13 at 07:43