0

我正在为自定义单选按钮使用 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;
}
4

1 回答 1

0

我已将您的代码放入 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>

它适用于我的页面，因为我可以选择单选按钮，并根据您的样式代码以蓝色显示。希望这可以帮助。

于 2019-08-10T20:02:31.530 回答