Question

我想通过自定义替换单选按钮的默认视图。所以，我想在两个图像之间切换（因为我不熟悉css3动画，所以我选择用图像完成工作）。

因此，对于检查状态，我想显示（check.png）：

enter image description here

当取消选中单选按钮时，我想显示（uncheck.png）：

enter image description here

HTML CODE：

目前我正在使用以下引导程序标记：

<section class="lineHeight">
                        <div class="radio">
                            <label>
                              <input type="radio" name="auditTool" id="optionsRadios1" value="option1">
                              <span class="outer"><span class="inner"></span></span>Large
                            </label>
                        </div>
</section>

CSS：

.lineHeight{
    line-height:56px;
}
.lineHeight .radio input[type=radio]{
  position: absolute;
  top: 50%;
  margin-top: -6px;
  margin-left: -20px;
}

Answer 1

您可以隐藏原生广播并使用CSS显示自定义广播。

＆＃13;

input[type=radio] {
  display: none;
}
input[type=radio] + label:before {
  content: '';
  display: inline-block;
  border: 2px solid #0F81D5;
  height: 12px;
  width: 12px;
  border-radius: 50%;
}
label:hover:before {
  box-shadow: inset 0 0 5px orange;
}
input[type=radio]:checked + label:before {
  border-width: 5px;
  height: 6px;
  width: 6px;
}

＆＃13;

<div>
  <input type="radio" name="radio" id="radio1" />
  <label for="radio1">Foo</label>
</div>
<div>    
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">Bar</label>
</div>
<div>    
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">Baz</label>
</div>

＆＃13;

Answer 2

＆＃13;

input[type=radio].css-checkbox {
  position: absolute;
  z-index: -1000;
  left: -1000px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
input[type=radio].css-checkbox + label.css-label {
  padding-left: 23px;
  height: 18px;
  display: inline-block;
  line-height: 18px;
  background-repeat: no-repeat;
  background-position: 0 0;
  font-size: 18px;
  vertical-align: middle;
  cursor: pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
  background-position: 0 -18px;
}
label.css-label {
  background-image: url(http://csscheckbox.com/checkboxes/u/csscheckbox_67c83917465692304d237c7e9e0533ca.png);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>CSS Checkbox Demo from CSSCheckbox.com</title>
  <link rel="stylesheet" href="style.css" />
  <style type="text/css">
    /*this is just to organize the demo checkboxes*/
    label {
      margin-right: 20px;
    }
  </style>
</head>

<body>
  <h1 style="margin:0; margin-top:10px; padding:0; padding-left:25px; padding-bottom:10px; font-family:sans-serif;">CSS Checkboxes!</h1>
  <div style="background:#444; color:#fafafa; padding:10px;">
    <h3>Dark Background</h3>
    <table>
      <tr>
        <td>
          <input type="radio" name="radiog_lite" id="radio1" class="css-checkbox" />
          <label for="radio1" class="css-label radGroup1">Option 1</label>
        </td>
        <td>
          <input type="radio" name="radiog_lite" id="radio2" class="css-checkbox" checked="checked" />
          <label for="radio2" class="css-label radGroup1">Option 2</label>
        </td>
        <td>
          <input type="radio" name="radiog_lite" id="radio3" class="css-checkbox" />
          <label for="radio3" class="css-label radGroup1">Option 1</label>
        </td>
      </tr>
    </table>
  </div>
  <div style="background:#fafafa; color:#222; padding:10px;">
    <h3>Light Background</h3>
    <table>
      <tr>
        <td>
          <input type="radio" name="radiog_dark" id="radio4" class="css-checkbox" />
          <label for="radio4" class="css-label radGroup2">Option 1</label>
        </td>
        <td>
          <input type="radio" name="radiog_dark" id="radio5" class="css-checkbox" checked="checked" />
          <label for="radio5" class="css-label radGroup2">Option 2</label>
        </td>
        <td>
          <input type="radio" name="radiog_dark" id="radio6" class="css-checkbox" />
          <label for="radio6" class="css-label radGroup2">Option 1</label>
        </td>
      </tr>
    </table>
  </div>
  <p style="padding-left:25px;">Radio Button generated by <a href="http://csscheckbox.com">CSS Checkbox</a>
  </p>
</body>

</html>

＆＃13;

参考：http://www.csscheckbox.com/radio-buttons/0/

如何为单选按钮自定义css

2 个答案: