質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

3回答

2427閲覧

bootstrapで<input type="text" class="form-control">フォーカスした時の枠線を消したい

kutu

総合スコア257

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2018/03/21 14:56

編集2018/03/21 16:14

下記の設定でテキストボックスをフォーカスした際に表示される青枠線を消すことが出来ません。どのように致せばよいでしょうか?

/* bootstrap使用 */ <input type="text" class="form-control" id="test1"> #test1{ outline:0; } #test1:focus{   /* focasとなっていたのでfocusに */ outline:0; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/03/21 18:01 編集

指定の値は「0」でなく、「none」ではないでしょうか? -追記- 「0」も有効な記述なのですね。知識不足で誤った質問でスミマセンでした。
kutu

2018/03/21 16:00

再現しないということは枠線が出ないということでしょうか?
kei344

2018/03/21 16:04

hover時に青が出て入力状態では(focus)青くなりませんね。あと、回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。
退会済みユーザー

退会済みユーザー

2018/03/21 16:09

質問者。多分 bootstrap 使用でしょうが その前提が何も書かれてない場合再現確認には使いませんので
kutu

2018/03/21 16:13

失礼しました。こちらbootstrapです。その時に青い枠線が出るのを防ぐ方法はありますでしょうか?
defghi1977

2018/03/22 00:06

現状のスクリーンショットを添付することで「青枠線」の意図するところを明らかにして下さい.
kszk311

2018/03/22 02:33

まさかとは思いますが、記載のコードをそのままHTMLに書いてるというわけではないですよね?<style type="text/css">...</style>で囲むか、外部ソースで読み込んでいますか?失礼ですが一応確認です。
guest

回答3

0

focus...

どこの写真週刊誌ですか → focas

回答

.form-control:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); }

bootstrap の表記はこんな感じなはずなので

#id_selector:focus { border: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; }

こう上書きでしょうか

投稿2018/03/21 15:00

編集2018/03/22 08:42
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

CSS

1#test1:focus { 2 border-color: inherit; 3 box-shadow: none; 4}

投稿2018/03/22 06:47

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

個人的な見解ですが、<input>要素へのoutline:0;を効かせる場合はidやclassでは無く、<input>要素そのものへの設定が必要では無いでしょうか?

全体では無く、特定の箇所のみであれば、<input>要素style="outline:0;"を直書きしてみてください。

投稿2018/03/21 23:18

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/03/21 23:55

-追記- 通常は提示コードの指定で問題ないと思います。「kei344」さんの検証と同じく私の環境でも表示はされていなかったのですが、質問者さんの環境で表示されるのであれば、CSSに何かしらの誤記述等があるのかと思ったので回答してみましたが、どうやら「間違った解釈」みたいですね。スミマセンでした。 m(_ _)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問