0

我在我的移动网站中添加了单选按钮，但它在 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">

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

4

2 回答 2

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;
于 2013-11-15T05:06:10.193 回答
-1

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

border-radius:12px;
于 2019-12-30T07:12:39.683 回答