CSSフォーカス文字列上の光が正しく機能していない

Question

こんにちは私はウェブサイトを設計していて、私のCSS上で問題に遭遇しています。私はちょっとこのCSSのことを奇妙に思っています。ここに私のテキスト領域に正しく動作することは私のcss

input[type="text"], textarea { 
     background: rgba(255,255,255,0.3); 
     border: none; 
     border-radius: 4px; 
     padding: 2%; 
     color: white; 
    } 
    input[type=text]:focus, textarea:focus { 
      box-shadow: 0px 1px 1px #f2dede inset, 0px 0px 8px #dff0d8; 


    } 

であり、これはそれがブラウザ

テキストフィールド名が正しい輝きを持っているが、その奇妙なテキストエリアが検討されていないことにどのように見えるかです彼らは私が上記のコードに貼り付けたものと同じルールを持っていることを..

Answer 1

は、次のことを設定してみてください：

input[type=text]:focus, textarea:focus { 
    box-shadow: 0px 1px 1px #f2dede inset, 0px 0px 8px #dff0d8; 
    outline: none; 
} 

一部のブラウザが自動的にフォーカスに入力、テキストエリアなどでアウトラインを設定し、これはおそらくあなたの問題の原因です。アウトラインをnoneに設定すると、この現象はなくなります。

Answer 2

これは、入力がデフォルトのスタイルを持っているので、あなたのスタイルを設定するとき、あなたがフォーカスのスタイルをリセットすることができます：

*:focus {outline: none;}