web-dev-qa-db-ja.com

Bootstrapの検証アイコンを削除する

説明

私はこれらを削除しようとしています Bootstrapの検証 アイコン（ "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>

前もって感謝します、
ルイス。

javascripthtmlcssbootstrap-4
12
Luiz

特定の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 4：の更新

特定のセレクターの背景画像をなしに設定すると、背景色とドロップダウンボタンが保持されます。

.form-control.is-invalid{
    background-image: none;
}

BootstrapのSASS/SCSSを使用するユーザー向けの更新：

PCalouche の優れた答えを参照してください。

7
wentjun

BootStrapのSCSSをコンパイルする場合は、bootstrap.scssをインポートする前にこれを含めることができます。

$enable-validation-icons: false;
23
PCalouche
.custom-select.is-invalid, .was-validated .custom-select:valid,.custom-select.is-invalid, .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,url("data:image/vg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") no-repeat center right 1.75rem/1.125rem 1.125rem !important;
    }
<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>

JSFiddle

0
Rowf Abd

これは機能します：

このコードを削除, error_class: 'is-invalid', valid_class: 'is-valid'simple_form_bootstrap.rb

0
Yshmarov