Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/redis/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Css 自定义按钮组_Css_Zurb Foundation - Fatal编程技术网

Css 自定义按钮组

Css 自定义按钮组,css,zurb-foundation,Css,Zurb Foundation,我想使用基础按钮组,并有自己的样式,但是我不知道如何设置自定义样式的敌人按钮 我有这个: .format-button-group { @include button-group-container( $styles:true ); .format-group { @include button; } } 如何为单击的按钮设置“活动”按钮样式?您可以使用radio group进行设置 html: <ul class="button-group round">

我想使用基础按钮组,并有自己的样式,但是我不知道如何设置自定义样式的敌人按钮

我有这个:

.format-button-group {
  @include button-group-container(
    $styles:true

  );
  .format-group { @include button; }
}

如何为单击的按钮设置“活动”按钮样式?

您可以使用radio group进行设置

html:

<ul class="button-group round">
    <li>
        <input type="radio" id="btn1" name="btn">
        <label for="btn1" class="small button secondary">Ipsum</label>
    </li>
    <li>
        <input type="radio" id="btn2" name="btn">
        <label for="btn2" class="small button secondary">Dolor</label>
    </li>
    <li>
        <input type="radio" id="btn3" name="btn">
        <label for="btn3" class="small button secondary">Sit amet</label>
    </li>
</ul>
input[type="radio"]{
    display:none;
    position:absolute;
}
.small.button.secondary{
    margin:0;
}
input[type="radio"]:checked + label{
    background-color: rgb(0, 114, 149);
}