搜索

首页  >  问答  >  正文

当bootstrap按钮处于活动状态时,为每个按钮添加阴影/边框的CSS

<p>我正在使用React框架创建前端,并使用Bootstrap 5.3进行设计。</p> <p>根据我的理解,Bootstrap现在作为标准已经取消了阴影效果。所以,如果按钮处于激活状态,按钮将不会显示阴影/边框,就像在Bootstrap v5.0文档中所示。</p> <p>https://getbootstrap.com/docs/5.0/components/buttons/</p> <p>不幸的是,我不知道如何直接在代码中自定义单个按钮。是否可以通过在按钮中添加style标签,或者在分组按钮中添加label标签来激活这种阴影效果?</p> <pre class="brush:php;toolbar:false;">style={{*这里是一些CSS魔法*}}</pre> <p>这是一些示例代码,我想用这种我们从v5.0中了解到的阴影效果来自定义三个按钮。</p> <pre class="brush:php;toolbar:false;"><div className="row"> <h4>选择缓冲区</h4> </div> <div className="row"> <div className="col-sm-4 p-3 d-flex justify-content-center"> <input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off" onClick={() => measurementConfig.buffer = 1 } /> <label className="btn btn-lg btn-warning" htmlFor="buffer1"><span className="bi-database-add"></span>&nbsp;缓冲区 1</label> </div> <div className="col-sm-4 p-3 d-flex justify-content-center"> <input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() => measurementConfig.buffer = 2 } /> <label className="btn btn-lg btn-success" htmlFor="buffer2"><span className="bi-database-add"></span>&nbsp;缓冲区 2</label> </div> <div className="col-sm-4 p-3 d-flex justify-content-center"> <input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() => measurementConfig.buffer = 3 } /> <label className="btn btn-lg btn-info" htmlFor="buffer3"><span className="bi-database-add"></span>&nbsp;缓冲区 3</label> </div> </div></pre> <p>提前感谢!</p>
P粉256487077P粉256487077466 天前483

全部回复(1)我来回复

  • P粉769413355

    P粉7694133552023-08-18 09:12:24

    使用这个css,它将会选择被选中的单选框输入的下一个相邻的标签。

    input[type="radio"]:checked+label.btn {
       border: 1px solid #000; //在这里添加边框/阴影
    }

    回复
    0
  • 取消回复