ブートストラップでアイコンを削除する方法

ブートストラップでアイコンを削除する実装方法: まず、対応するコード ファイルを開き、次に特定の CSS クラスまたは疑似クラスの背景プロパティを none に設定することでアイコンを削除します。

このチュートリアルの動作環境: Windows 7 システム、ブートラップ バージョン 3.3.7。この方法は、すべてのブランドのコンピューターに適しています。

推奨: 「bootstrap チュートリアル 」 「css ビデオ チュートリアル 」

Bootstrap の確認アイコンを削除します

#具体的な質問:

Bootstrap の検証アイコン (「x」と「チェック」) を削除しようとしていますが、すべてを調べましたが、どこにあるのかわかりません。は 。

この 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 クラス/疑似クラスの背景プロパティを none

.was-validated .custom-select:valid {
  background-image: none;
}
.was-validated .custom-select:invalid {
  background-image: none;
}

# に設定することで、アイコンを簡単に削除できます。 ## 検証アイコンを削除したいが、選択入力の矢印アイコンは残しておきたい場合は、背景を次のように設定することでこれを実現できます

.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;
}

プログラミング関連の知識の詳細については、次のサイトを参照してください:

プログラミング教育

! ！

以上がブートストラップでアイコンを削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。