左上を四角くくり抜いたようなテキストボックス

Question

前提・実現したいこと

調べても思った通りのものが出なかったので質問させてください＋文章で表現しにくかったので図を書きました
黒い四角がユーザー写真のボックスで、赤いのがテキスト入力ボックスです。
図のようなテキストボックスを作成したい場合はテキストボックスにどういうCSSを充てたらよいでしょうか？
テキストボックスは、端で折り返して、画像を超えたら開始位置が画像下からになってほしいです
画像のように文章が長くなるほど、テキストボックスが伸びていく形が理想です。
よろしくお願いします

Answer 1

<input>や<textarea>ではできないので、contenteditableを使います。

例:

<div style="border:2px solid red; width:200px; min-height:54px;">
<div class="写真ボックス" style="width:100px; height:50px; border:2px solid black; float:left;"></div>
<span contenteditable=true>
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむ
</span></div>

Comments

[krpk]

ありがとうございます
既にあるボックスにCSSを充てる方法では実現できませんか？
実は、既にあるサイトの見た目をCSSでアレンジできるカスタムCSSというものでやっているのです。

[int32_t]

Chrome/Edge/Safari限定ならできるのですけど、そのプロパティは廃止される可能性が高いのでできないと思ったほうがよいです。

Answer 2

テキストボックスは改行されることはありません
あえてやるならこんな感じ

<style>
div{width:180px;}
img{width:100px;height:60px;float:left;}
</style>
<script>
document.addEventListener('formdata',(e)=>{
  document.querySelectorAll('[data-name]').forEach(x=>{
    e.formData.append(`${x.dataset.name}`,x.textContent);;
  });
});
</script>
<form>
<div>
<img src="" alt="dummy">
<span contenteditable=true data-name="hoge">あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむ</span>
</div>
<input type="submit" value="send">
</form>

Comments

[krpk]

ありがとうございます
改行でなく、長文になり右端で折り返されて下段にいったときにこういうふうに画像下が開始地点にする方法はありませんか？

[krpk]

せっかく答えていただいているのにすみません
自分のサイトではなく、別のサイトでCSSを充てて自分なりの見た目に変えれるカスタムCSSというものを使用しています
webインスペクタで要素を探してやりたいことを調べながらやっていましたが詰まってしまい質問致しました
ですのでCSSで充てれる方法があれば知りたいです

[yambejp]

他人のサイトで独自の解釈で回り込みをするというのは合理的ではありません
最初に指摘しましたがテキストボックスは改行を含め変な見た目上の変更はできませんので
追記の内容であれば「できない」と考えてください