首頁 >web前端 >Bootstrap教程 >bootstrap怎麼刪除圖標
bootstrap刪除圖示的實作方法:先開啟對應的程式碼檔案;然後透過將特定CSS類別或偽類的background屬性設為none來簡單地刪除圖示即可。
本教學操作環境:Windows7系統、bootsrap3.3.7版,此方法適用於所有品牌電腦。
推薦:《bootstrap教學》《css影片教學》
刪除Bootstrap的驗證圖示
#具體問題:
我正在嘗試刪除這些Bootstrap's validation圖示(“x”和“check”),但是我已經研究了所有內容,但我找不到它在哪裡。
您也可以在其中看到這個JSFiddle。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <form class="was-validated"> <div class="form-group"> <select class="custom-select" required> <option value="">Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div class="invalid-feedback">Example invalid custom select feedback</div> </div> </form>
實作方法:
您可以透過將特定CSS類別/偽類別的background屬性設定為none來簡單地刪除圖示
.was-validated .custom-select:valid { background-image: none; } .was-validated .custom-select:invalid { background-image: none; }
#如果您想刪除驗證圖標,但將箭頭圖標保留在選擇輸入上,則可以透過將background設定為以下內容來實現
.was-validated .custom-select:invalid { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px; }
更多程式相關知識,請造訪:程式設計教學! !
以上是bootstrap怎麼刪除圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!