ブートストラップでアイコンを削除する方法-ブートストラップのチュートリアル-php.cn

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

藏色散人

リリース： 2021-01-08 14:36:01

オリジナル

2486 人が閲覧しました

ブートストラップでアイコンを削除する実装方法: まず、対応するコードファイルを開き、次に特定の 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=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 4 5&#39;%3e%3cpath fill=&#39;%23343a40&#39; d=&#39;M2 0L0 2h4zm0 5L0 3h4z&#39;/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
}

ログイン後にコピー

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

プログラミング教育

! ！

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