无法在Chrome中选择单选按钮

Question

我正在创建一组单选按钮，但我不能选择其中任何一个非常奇怪。当我将鼠标悬停在单选按钮上时，它就像在pic2中一样消失。当我移出鼠标时，它会再次出现。我确实有这些按钮的ID，名称和值，这个问题在我的Angular应用程序中随处可见。以前有人有类似的问题吗？

radio buttons

radio buttons when hover over

代码在这里：

 <div>
    <form>
        <input type="radio" name="rad" value="Radio1" />Radio 1<br/>
        <input type="radio" name="rad" value="Radio2"/>Radio 2<br />
        <input type="radio" name="rad" value="Radio3"/>Radio 3<br /><br />
    </form>
</div>

更新：此问题仅存在于Chrome中，在IE中完美运行。

Update2：原来它导致了这个问题。最终我发现这段代码隐藏了我的单选按钮。

button:focus,
button:active,
button:hover
{
   outline:0px !important;
   -webkit-appearance:none;
}