HTML CSS 2个单选按钮切换样式
HTML CSS 2 radio buttons toggle style
我有 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>
感谢任何帮助。
.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 中的按钮组可能对你来说很棒。
这应该适合你:
我删除了标签上的边框,因为如果您对齐它们,就会创建一条线。我还删除了标准的 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>
我有 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>
感谢任何帮助。
.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 中的按钮组可能对你来说很棒。
这应该适合你:
我删除了标签上的边框,因为如果您对齐它们,就会创建一条线。我还删除了标准的 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>