c# - 如何修复网络表单中的自定义单选按钮

Question

我正在使用自定义单选按钮的 CSS 代码。如果我使用 html 代码，一切都很好。但我正在尝试使用 asp:RadioButton 并且它在标签中呈现了另一个 标记。所以 css 代码不是那样工作的。知道如何解决吗？

自定义 RadioButton HTML 代码(工作正常):

<label class="container">
   <input type="radio">
   <span class="checkmark"></span>
</label>

RadioButton ASP.NET 在 span 标记中呈现。 HTML 输出(不工作):

<label class="container">
   <span>
       <input type="radio">
       <label>Option One</label>
   </span>
   <span class="checkmark"></span>
</label>

这是CSS代码

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

Answer 1

我已将您的代码放入 aspx 页面中。

我发现 span 标签没有关闭:

<label class="container">
   **<span>**
   <input type="radio">
   <label>Option One</label>
   **<span>**
   <span class="checkmark"></span>
</label>

我关闭了它，但它在我的页面上也不起作用。因为我不明白你为什么想要那个 span 标签，所以我删除了它。我是这样的:

<label class="container">
      <input type="radio">
      <label>Option One</label>
      <span class="checkmark"></span>
</label>

它在我的页面上工作，因为我可以选择单选按钮，它根据您的样式代码显示为蓝色。希望这会有所帮助。