白い背景に編集バージョンをデザインする方法は？
私はウェブサイトのユーザープロファイルデザインに取り組んでいます。情報（名前、電子メール、ユーザー名など）は、真っ白な背景です。
使用したい編集機能の種類には、編集ボタンのクリックが含まれ、情報はテキスト領域などの編集可能なフィールドに即座に変更されます。私の問題は、編集可能なフィールドのスタイルを設定する方法がわからないことです。私が使用している方法の1つは、編集フィールドがページにくぼんでいるように見せるために、暗い背景の白いフィールドを使用する方法ですが、私の背景は既に白いため、機能しません。暗いスタイルを設定すると、フィールドがページから飛び出しているように見えます。
これらのフィールドが現在編集可能であることを明確に示すために使用できるデザインスタイルはありますか？
uXスタック交換へようこそ。質問が理解できたらいいのですが。
編集フィールドにオフホワイトの背景を使用し、編集可能なフィールドの範囲を示す暗い下の境界線を付けることができます。または、編集可能なフィールドの完全な範囲を示す完全な境界線をフィールドの周りに配置します。
いずれにしても、フィールドが以前の状態から変化したことを示します。
当然、デザインを変えることができますが、要点は、ボーダーのすべてまたは一部を変更することで、フィールドおよび白いページの背景。次に、境界線の色を明るくしたり、グローを追加したりして、現在のフォーカスでフィールドをさらにスタイル設定できます。
例：
デフォルトのスタイリングを見ましたか？ HTML入力タグのデフォルトのスタイル設定は、編集可能なフィールドをすでに示しています。たとえば、Chrome=のデフォルトのスタイルは次のとおりです。input {border-width：2px; border-style：inset;}点滅するカーソルと：focus疑似クラスのデフォルトのスタイルは、ユーザーにテキストを入力します。テキストフィールド間をタブで移動できます。：focus {outline：-webkit-focus-ring-color auto 5px;} 
デフォルトが気に入らない場合は、テキスト入力のデザイン効果の多くの例を示しているcodropsを確認することをお勧めします。 https://tympanus.net/codrops/2015/ 01/08/inspiration-text-input-effects /