HTML CSS 2 单选按钮切换样式

Question

我有 2 个单选按钮，按下时可以在彼此之间切换。

目前它们看起来像这样：

但我希望它们看起来更像这样，因此它实际上看起来像一个切换效果而不是 2 个不同的按钮。

这是当前代码：

.radio-toolbar-3 {
  margin: 1vw 1vw 1vw 0;
}

.radio-toolbar-3 label {
  display: inline-block;
  background-color: #FFFFFF;
  padding: 10px 20px;
  font-size: 16px;
  border: 1px solid #2E2E2E;
  width: 8vw;
  text-align: center;
  border-radius: 0.5vw;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.radio-toolbar-3 label:hover {
  background-color: #B4B4B4;
}

.radio-toolbar-3 input[type="radio"]:checked+label {
  background-color: #DAA521;
}

<div class="radio-toolbar-3">
  <input type="radio" id="classic" name="subscription-type" value="classic">
  <label for="classic">Classic</label>
  <input type="radio" id="adventurer" name="subscription-type" value="adventurer">
  <label for="adventurer">Adventurer</label>
</div>

任何帮助表示赞赏。

Answer 1

这应该适合你：

我删除了标签上的边框，因为如果您对齐它们，这会创建一条线。我还删除了标准的HTML 单选按钮。这导致了两个标签之间的差距，所以我给了他们一个margin-left: -30px;。最后，我需要并排对齐两个标签。我给容器一个display: flex;，并将标签的宽度调整为50%。

.radio-toolbar-3 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.19);
  height: 40px;
  width: 100%;
  display: flex;
  overflow: hidden;
  border-radius: 10px;
}

.radio-toolbar-3 label {
  width: 100%;
  display: inline-block;
  background-color: #FFFFFF;
  margin-left: -30px;
  padding: 10px 20px;
  font-size: 16px;
  text-align: center;
}

.radio-toolbar-3 label:hover {
  background-color: #B4B4B4;
}

.radio-toolbar-3 input[type="radio"]:checked+label {
  background-color: #DAA521;
  color: white;
}

input[type="radio"] {
  visibility: hidden;
}

<div class="radio-toolbar-3">
  <input type="radio" id="classic" name="subscription-type" value="classic">
  <label for="classic">Classic</label>
  <input type="radio" id="adventurer" name="subscription-type" value="adventurer">
  <label for="adventurer">Adventurer</label>
</div>

Answer 2

.radio-toolbar-3 {
    //margin: 1vw 1vw 1vw 0;  //remove this style
}
.radio-toolbar-3 label {
    color: #000; // add this
    display: inline-block;
    background-color: #FFFFFF;
    padding: 10px 20px;
    font-size: 16px;
    //border: 1px solid #2E2E2E; // remove this
    width: 8vw;
    text-align: center;
    border-radius: 0.5vw;
    box-shadow: 0px 22px 19px -13px rgba(0,0,0,0.75); //edit this
}
.radio-toolbar-3 label:hover {
    background-color: #B4B4B4;
}
.radio-toolbar-3 input[type="radio"]:checked + label {
    background-color: #DAA521;
    color: white; //add this
}

同时使用 Bootstrap 4 中的按钮组可能对您很有帮助。