ContentEditable DIV をテキストフィールドのようにスタイル設定するにはどうすればよいですか?-CSSチュートリアル-php.cn

ContentEditable DIV をテキストフィールドのようにスタイル設定するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-12-02 15:43:14

オリジナル

536 人が閲覧しました

How Can I Style a ContentEditable DIV to Look Like a Text Field?

編集可能な DIV をテキストフィールドとしてスタイル設定する

contentEditable=true を使用して編集可能なコンテンツを含む DIV を作成する場合、ユーザーはそれが可能であることをすぐには認識できない場合があります。デフォルトの外観のため編集できません。これは、DIV を標準のテキスト入力フィールドに似たスタイルにすることで解決できます。

この視覚的な類似性を実現するには、次の CSS スタイルを利用できます。

#editable-div {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    width: 400px;
}

ログイン後にコピー

これらのスタイルは境界線を提供します。、オーバーフローを通じて高さを調整でき、テキストフィールドに適切なフォントを設定できます。

さらに、入力 {} セクションにカスタムスタイルを含めて、さらに機能を強化できます。テキストフィールドのようなデザイン:

input {
    margin-top: 5px;
    width: 400px;
}

#inputted-div {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    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;    
}

ログイン後にコピー

ここでは、入力が他の要素に近づきすぎないようにマージンを追加し、一貫した外観を実現するために背景色、境界線、影をカスタマイズしました。

これらの CSS スタイルを実装すると、編集可能な DIV を視覚的に魅力的なテキストフィールドに変換でき、その内容を変更できることがユーザーに明確になります。

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