web-dev-qa-db-ja.com

テキスト入力の内側の影を削除

Html5を使用して、クロムのテキスト入力があり、テキスト入力の外観を変更したい、フォーカスの概要（クロムのオレンジ）を削除し、背景を明るい色に設定します#f1f1f1が、背景色に変化がない場合に、押し込まれたように見えるように、上と左側に太い境界線が表示されるようになりました。どうすれば削除できますか？申し訳ありませんが、モバイルデバイスでは写真を提供できません。

Chromeで発生します。つまり、Firefoxは他のものをテストできません。

htmlcsscss3input
60
FabianCook

border-style:solid;はinsetスタイルをオーバーライドします。それはあなたが尋ねたものです。

border:noneは、境界線をすべて削除します。

border-width:1pxは、バックグラウンドが変更される前のように設定します。

border:1px solid #ccccccはより具体的で、幅、スタイル、色の3つすべてを適用します。

例： https://jsbin.com/quleh/2/edit?html,output

111
Anthony Hatzopoulos

これは、モバイルサファリのソリューションです。

-webkit-appearance：なし;

ここで提案されているとおり： Mobile Safari（iPhone）のtextarea inner shadowを削除

32
Owen

現在動作しているソリューションはありません。これが私の解決策です。プレフィックスを追加できます。

box-shadow: inset 0px 0px 0px 0px red;
24
atilkan

border: noneまたはborder: 0を追加して境界線を削除するか、border: 1px solid #cccを追加して境界線を薄く平らにします。

Firefoxでゴーストパディングを削除するには、::-moz-focus-innerを使用できます。

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

live demo を参照してください。

17
Marat Tanalin

border: 1px solid blackを設定して、すべての辺を等しくし、あらゆる種類のカスタムボーダー（実線以外）を削除します。また、box-shadow: noneを設定して、適用されているインセットシャドウを削除します。

10
Erick Petrucelli

これを試して
outline: none;

ライブデモ https://codepen.io/wenpingguo/pen/KQgbXq

2
user1506075

私はFirefoxに取り組んでいます。そして、私は同じ問題を抱えていました、入力タイプのテキストは、ボックスシャドーインセットのように見える自動定義されていますが、そうではありません。変更するのは境界線です... border:0;を設定するだけで完了です。

0
vincent thorpe