使用单选按钮设计切换按钮

Question

我正在尝试使用普通CSS开发切换按钮。我的切换按钮应如下图所示。

以下是我创建的代码片段。

＆＃13;

＆＃13;

.btn {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 3px 16px;
  font-family: ABBvoice;
  font-size: 13px;
  font-weight: 500;
  border-radius: 0;
  height: 30px;
  padding-bottom: 7px;
}

.btn-default-toggle-ghost,
.btn-default-toggle-ghost:focus {
  background: transparent;
  border: 1px solid rgba(160, 160, 160, 0.6);
  color: #464646;
  outline: none;
}

＆＃13;

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-default-toggle-ghost active">
    <input type="radio" name="test-toggle" checked="checked"> Option 1
  </label>
  <label class="btn btn-default-toggle-ghost active">
    <input type="radio" name="test-toggle"> Option 2
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

以上代码显示如下切换按钮。

有人可以帮我修改上面代码中的css吗？任何帮助，将不胜感激。谢谢。

Answer 1

这对你有用：

Input无法设置样式，最好隐藏它们并根据您的需要设置样式label。

＆＃13;

＆＃13;

.btn {
  display: inline-block;
  margin-bottom: 0;
  text-align: center;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 3px 16px;
  font-family: ABBvoice;
  font-size: 13px;
  font-weight: 500;
  border-radius: 0;
  height: 30px;
  padding-bottom: 7px;
}

.btn-default-toggle-ghost,
.btn-default-toggle-ghost:focus {
  background: transparent;
  border: 1px solid rgba(160, 160, 160, 0.6);
  color: #464646;
  outline: none;
  text-align: center;
  font-size: 16px;
  line-height: 30px;
  position: relative;
  float: left;
}

.btn-group [type="radio"] {
  display: none;
}

[type="radio"]:checked+.btn-default-toggle-ghost {
  background: #DEDEDE;
}

[type="radio"]:checked+.btn-default-toggle-ghost:after {
  content: '';
  position: absolute;
  top: 0px;
  height: 3px;
  background: #0093F6;
  left: 0px;
  right: 0px;
}

.btn-default-toggle-ghost+[type="radio"]+.btn-default-toggle-ghost{
 border-left:0px;/*for removing the extra border between the buttons*/
}

＆＃13;

<div class="btn-group" data-toggle="buttons">
  <input type="radio" id="one" name="test-toggle" checked="checked">
  <label for="one" class="btn btn-default-toggle-ghost active">
    Option 1
  </label>
  <input type="radio" id="two" name="test-toggle">
  <label for="two" class="btn btn-default-toggle-ghost active">
    Option 2
  </label>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望这对你有用。

Answer 2

您可以查看for的{​​{1}}属性。请注意，我在label

之后放置了label

input[type=radio]

.btn {
    display: inline-block;
    margin-bottom: 0;
    text-align: center;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 3px 16px;
    font-family: ABBvoice;
    font-size: 13px;
    font-weight: 500;
    border-radius: 0;
    height: 30px;
    padding-bottom: 7px;
}
.btn-default-toggle-ghost, .btn-default-toggle-ghost:focus {
    background: transparent;
    border: 1px solid rgba(160,160,160, 0.6);
    color: #464646;
    outline: none;
}

input[type=radio]{
  /* comment this out to check if radio input is checked */
  display: none;
}
input[type=radio]:checked+label{
  background-color: blue;
  color: white;
}