編集可能な DIV をテキストフィールドのように見せるにはどうすればよいですか?-CSSチュートリアル-php.cn

編集可能な DIV をテキストフィールドのように見せるにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-30 17:52:12

オリジナル

162 人が閲覧しました

How Can I Make Editable DIVs Look Like Text Fields?

テキストフィールドの魅力を備えた編集可能な DIV の作成

編集可能なユーザーインターフェイスを設計する場合、ユーザーにインタラクティブな要素を視覚的に示すことが重要です。 contentEditable が有効になっている DIV は編集可能な機能を提供しますが、その外観は直感的ではない場合があります。幸いなことに、CSS テクニックにより、テキストフィールドの美しさを模倣するように DIV を変換できます。

1 つのアプローチは、ブラウザー固有の外観を活用することです。 Safari、Chrome、Firefox の場合:

#textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
}

#input {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
}

ログイン後にコピー

この CSS は、それぞれテキストエリアとテキスト入力フィールドをシミュレートします。

ブラウザ間の互換性を希望する場合は、次のスタイルで同様の機能を実現できます。結果:

#textarea {
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}

#input {
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;
    font: -moz-field;
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;
}

ログイン後にコピー

これらの調整により、編集可能な DIV はテキストフィールドの見慣れた外観になり、機能がさらに使いやすくなりました。

以上が編集可能な DIV をテキストフィールドのように見せるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。