内容編集可能なテキストボックスを消すにはどうすればよいですか？

Question

私は自分のウェブページでcontenteditableを使用しています。これは正常に動作しますが、ブラウザは、編集可能なセクションがアクティブになったときに、編集可能なセクションの周りに醜い境界線を置きます。また、ページ上の別の要素にフォーカスが変更されると、これらの罫線の一部が消去されません。

Safariは明るい青色の境界線を作成しますが、Firefoxでは細い黒い線が使用されるため、ここではブラウザの解釈がいくつかあります。

編集可能なセクションの境界線を明示的にnoneに設定し、そのCSSプロパティを重要にすることを試みましたが、これはブラウザの動作を変更しません。

私の質問：

ユーザーが編集を開始するためにその中にクリックしたときborderプロパティを却下ページ要素のスタイリングに影響を与える方法はありますか？

Answer 1

輪郭を追加してみましょう：境界要素のハイライトプロパティを削除するためのフォーム要素はcssにはありません。例えば

：

input:focus{ 
     outline:none; 
    } 

    textarea:focus{ 
     outline:none; 
    } 

    select:focus{ 
     outline:none; 
    } 

作業コードの場合Jsfiddle link

Answer 2

はこのスタイル（JsFiddle）を追加見つける：

[contenteditable="true"]:active, [contenteditable="true"]:focus 
{ 
    border:none; 
    outline:none; 
} 

すべてのcontentEditable要素が境界線とアウトラインを使用しないようにするにはfocuesedときに。

編集：私は、優れたtutorial

Answer 3

[contenteditable="true"]:active, 
[contenteditable="true"]:focus 
{ 
border:none !important; 
outline:none !important; 
}