搜尋

首頁  >  問答  >  主體

當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></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></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>/span>&nbsp;緩衝區3</label> ; </div> </div></pre> <p>提前感謝! </p>
P粉256487077P粉256487077493 天前515

全部回覆(1)我來回復

  • P粉769413355

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

    使用這個css,它將會選擇被選取的單選框輸入的下一個相鄰的標籤。

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

    回覆
    0
  • 取消回覆