DIV をテキストフィールドのようにスタイル設定するには?

テキストフィールドの外観を模倣するために DIV をスタイルする方法

contentEditable が有効になっている DIV 要素がある場合、ユーザーはそのコンテンツを編集できます。ただし、デフォルトのスタイルでは編集可能な性質が伝わらない可能性があります。この記事では、DIV をテキスト入力フィールドのように表示する解決策について説明します。

CSS と HTML のスタイル

提供されている CSS と HTML のサンプルは、DIV のスタイルを設定する方法を示しています。テキストエリアと入力フィールドに似ています。 CSS には、さまざまなブラウザをサポートするためのベンダー プレフィックス付きスタイルが含まれています。

出力

結果の出力では、Safari、Chrome、およびその他の実際のテキスト フィールドと視覚的に区別できない編集可能な DIV が作成されます。ファイアーフォックス。 Opera や IE9 でも問題なく表示されます。

デモとサンプル コード

動作するデモについては、提供されている jsfiddle URL にアクセスしてください:

http://jsfiddle.net/ThinkingStiff/AbKTQ/

CSS と HTML コードのサンプルは以下に提供されています。参照:

CSS:

textarea {
    /* shared properties */
    height: 28px;
    width: 400px;
}

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

input {
    /* shared properties */
    margin-top: 5px;
    width: 400px;
}

#input {
    /* input-specific properties */
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    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;    
}

HTML:

<textarea>I am a textarea</textarea>
<div>

これらのスタイル手法を独自のコードに組み込む視覚的に魅力的で直感的に編集可能な DIV 要素を作成します。

以上がDIV をテキストフィールドのようにスタイル設定するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。