Question

是否可以使用单选按钮使用文本切换而不使用id或javascript？你可以使用'class'标签吗？这不是“你应该使用javascript或id's”，而是一个没有它们就可以做到这一点。在解决这个问题时，我们将不胜感激。

Answer 1

绝对！没有什么可以阻止您使用 class selectors 而不是 ID selectors 。

这是一个简单的单选按钮，可以切换文本。它使用纯CSS，并使用类：

.switch-field {
  font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;
  padding: 40px;
    overflow: hidden;
}

.switch-title {
  margin-bottom: 6px;
}

.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

.switch-field label {
  display: inline-block;
  width: 60px;
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition:    all 0.1s ease-in-out;
  -ms-transition:     all 0.1s ease-in-out;
  -o-transition:      all 0.1s ease-in-out;
  transition:         all 0.1s ease-in-out;
}

.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
  background-color: #A5DC86;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}

<form class="form">
    <div class="switch-field">
      <div class="switch-title">Is this awesome?</div>
      <input type="radio" id="switch_left" name="switch_2" value="yes" checked/>
      <label for="switch_left">Yes</label>
      <input type="radio" id="switch_right" name="switch_2" value="no" />
      <label for="switch_right">No</label>
    </div>
</form>

希望这有帮助！：）

使用文本作为单选按钮而不使用id或JS

1 个答案: