form-controlで作成したテキスト入力フォームのフォーカス時の青い枠線を消したい

こんにちは。
Bootstrapでテキスト入力欄を作成しています。
class="form-control"を使った時のテキスト入力フォームのフォーカス時の青い枠線を消したいです。
class="form-control"を使わなければ下記のCSSで消せました。

chromeのデベロッパーツールで検証してみましたがどこを操作すればいいのかわかりません。
宜しくお願いします。

html
1<div class="container">
2		<form>  		
3			<div class="form-group">	
4				<input type="text" class="form-control" placeholder="探す" >
5			</div>
6		</form>
7</div>

css
1input[type="text"]{
2	outline: none;
3}

※下記枠線を消すのに試してみたcss

css
1input[type="text"]{
2  outline: none;
3}
4
5
6
7input[type="text"]:focus {
8  outline: none;
9}
10
11*:focus{
12  outline: none;
13}

m.ts10806

2019/04/25 05:49

利用されているBootstrapのバージョンを質問に追記してください

行動規範の内容に同意します

回答1件

ベストアンサー

本体CSSを確認しますと下記のように指定されています。

css
1.form-control:focus {
2  color: #495057;
3  background-color: #fff;
4  border-color: #80bdff;
5  outline: 0;
6  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
7}