HTML单选按钮在iphone中看起来很方正

Question

我在我的移动网站上添加了单选按钮，但它看起来是方形，在iPhone浏览器上专门用于渐变填充，同时单击它会显示选定的单选按钮，周围有亮边框。在其他手机浏览器上，它看起来很合适，就像在没有边框的单选按钮的Windows和Android手机上一样。

我试图通过CSS来控制它，但不起作用。

input[type="radio"] {border: none!important; background-color: transparent; appearance: radio; -moz-appearance: radio; -webkit-appearance: radio;}

这是实际的按钮代码。

<input type="radio" name="ratings[1]" id="Quality_1" value="1">

任何人都可以帮我解决这个问题吗？

Answer 1

您必须具有应用于单选按钮的CSS样式：

1. 设置边框半径（低半径值，例如2px） - 这会产生方形效果
2. 设置背景颜色 - 以提供渐变颜色。

例如，您的CSS中可能有类似的内容：

input { 
    border-radius:2px;
    background-image: -webkit-linear-gradient(top, rgb(186,0,0) 0%, rgb(255,59,59) 49%);
}

您需要使用CSS样式覆盖它，就像您尝试过的那样，否则会影响单选按钮的CSS样式不会影响它。

例如，通过将CSS类更改为以下内容，它不会将类应用于单选按钮：

input:not([type='radio'])
    border-radius:2px;
    background-image: -webkit-linear-gradient(top, rgb(186,0,0) 0%, rgb(255,59,59) 49%);
}

注意：您的CSS示例中存在错误，这可能是您仍然拥有背景颜色的原因 - none和!important之间应该有一个空格：

border: none !important;

Answer 2

将此样式添加到您的单选按钮

border-radius:12px;