【问题标题】:Is it possible to change the color of selected radio button's center circle是否可以更改所选单选按钮中心圆的颜色
【发布时间】:2014-06-03 18:15:57
【问题描述】:

是否可以设置选定单选按钮的中心圆的样式,至少在 webkit 浏览器中...?

我现在拥有的:

我想要的:

我可以如下改变背景颜色、阴影等

#searchPopup input[type="radio"]{
  -webkit-appearance:none;
  box-shadow: inset 1px 1px 1px #000000;
  background:#fff;
}

#searchPopup input[type="radio"]:checked{
  -webkit-appearance:radio;
  box-shadow: none;
  background:rgb(252,252,252);
}

有什么想法吗?

【问题讨论】:

    标签: html css input webkit radio-button


    【解决方案1】:

    您可以使用一些圆形边框技巧(渲染外圆)和伪元素:before(渲染内圆)模仿单选按钮,幸运的是可以在radio类型的输入字段上使用:

    input[type='radio'] {
      -webkit-appearance:none;
      width:20px;
      height:20px;
      border:1px solid darkgray;
      border-radius:50%;
      outline:none;
      box-shadow:0 0 5px 0px gray inset;
    }
    
    input[type='radio']:hover {
      box-shadow:0 0 5px 0px orange inset;
    }
    
    input[type='radio']:before {
      content:'';
      display:block;
      width:60%;
      height:60%;
      margin: 20% auto;    
      border-radius:50%;    
    }
    input[type='radio']:checked:before {
      background:green;
    }
    

    Working Demo.

    【讨论】:

    • 这在 Internet Explorer (IE) 中不工作,请您给我建议如何在 IE 中工作。
    • @user3577774 OP 要求在基于 Webkit 的浏览器中工作的简单解决方案(至少如此)。跨浏览器解决方案更复杂。我做了一个这样的演示。这几乎是完美的,你可以在这里看到它jsfiddle.net/viphalongpro/sVFU3
    • 添加 -moz-appearance 以使其与 Firefox 兼容
    【解决方案2】:

    您可以将单选按钮绑定到标签,而不是您可以隐藏任何您喜欢的单选按钮和样式标签。 Example.

    div {
        background-color: #444444;
        display: flex-column;
        display:webkit-flex-column;
    }
    input {
        margin: 10px;
        position: absolute;
        left: 100px;
    }
    label {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        margin: 10px;
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color: #ffffff;
        box-shadow: inset 1px 0 #000000;
    }
    #green {
       border: 8px solid green;
    }
    #red {
        border: 8px solid red;
    }
    input:checked + #green {
        border: 8px solid #ffffff;
        background-color:green !important;
    }
    input:checked + #red {
        border: 8px solid #ffffff;
        background-color: red !important;
    }
    Click a button on the left - radio button on the right will be checked.
    <div>
        <input id="greenInput" type="radio" name="someName">
        <label id="green" for="greenInput"> </label>
        <input id="redInput" type="radio" name="someName">
        <label id="red" for="redInput"></label>
     </div>

    【讨论】:

    • 不完全确定为什么这个答案被忽略了?提供了最好和最有用的答案,也是最适合跨浏览器的想法!
    • 很久以前,但我同意安德鲁的观点。这似乎是功能和兼容性的最佳整体选择。
    【解决方案3】:

    您还可以在选中单选按钮时应用背景图像

    [type="radio"]:checked {
        width: 16px;
        height: 16px;
        -webkit-appearance: none;
        background-image:  ...
    }
    

    一个例子:http://jsfiddle.net/yZ6tM/

    【讨论】:

    • 这在 Internet Explorer (IE) 中不工作,请您给我建议如何在 IE 中工作。
    • 这是一个解决方案,但相当昂贵......对于大多数情况,css 更漂亮和高效。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-08-20
    • 1970-01-01
    • 2021-11-20
    • 2021-09-23
    • 2011-04-04
    • 2011-04-19
    相关资源
    最近更新 更多