HTML　textareaが内側にはいってしまう。

お世話になります。よろしくお願いします
現状textareaのidにtextを指定しています。
このtextareaのidのデザインを変更したいです。

変更したい画像はNo1になります。以下画像のNo1を実装したいです。
現状はNo2のようになってしまいます。

しかしtextareaを実装するとNo2のように枠に枠が2個入ってしまいます。
以下No2のソースの中にtextareaを用いてNo1のような表示(枠が１つでgrooveが使えてる状態)は
どのようにしたいのでしょうか？

このようにしたい　No1

<div style="border:groove;padding:20px">
	HOGEHOGE　--->ここにid="text”の内容を表示させたいができない。textareaの外側は不要
</div>

こうなってしまう　No2

<div style="border:groove;padding:20px">
	<textarea id="text">HOGE</textarea>
</div>

退会済みユーザー

2019/08/26 03:48

style="background-color:transparent;で解決しました。

m.ts10806

2019/08/26 03:59

>style="background-color:transparent;で解決しました。どこに書いても今回の要件は満たせませんが。

azuapricot

2019/08/26 04:00

解決したなら自己解決で質問を締めて下さい。

退会済みユーザー

2019/08/26 04:03

＞azuapricot 解決済にしました。

azuapricot

2019/08/26 04:41

まぁ質問内容からみても背景透明にしてなんで解決したのかは謎ですけど質問者さんが解決したと思うのならそれで良いんでしょう（）

行動規範の内容に同意します

回答3件

ボーダーを消してリサイズできないようにすればいいんでは。

html
1<div style="border:groove;padding:20px">
2    <textarea id="text" style="border:none;resize: none;">HOGE</textarea>
3</div>

要件がハッキリしないのでこれ以上は、要件を明確にしてもらわないと何とも。

結局こうしたってことですかねー（エスパー）。

html
1<textarea id="text" style="border:none;resize: none;background-color:transparent" disabled>HOGE</textarea>

「textareaを残して頂きましたが、textareaは削除したい」
発言から一転しているのが良く分かりませんが。

投稿2019/08/26 03:24

編集2019/08/26 04:14

m.ts10806

総合スコア80850

m.ts10806

2019/08/26 03:24

ちなみに私も「丸投げ」に一票入れてます。丸投げなのは変わりないから。

退会済みユーザー

2019/08/26 03:27

失礼しました。まず表示はNo1の記載のようにしたいです。しかしid=textの内容を表示させたいです。 textareaを残して頂きましたが、textareaは削除したいです。あくまで表示は表示はNo1の記載のようにしたいです。 id=textの内容をNo1の中に表示させたいです。 textareaは不要です。上記3点が要件です。引き続きよろしくお願いします

m.ts10806

2019/08/26 03:28

ん？質問内容だけ見たら自分でtextarea入れてるようにしか見えませんけど。自分で入れたなら自分でよければいいだけの話では？（要件がハッキリしないと書いたのは特にそこの話）

m.ts10806

2019/08/26 03:38 編集

直前の質問の回答が全く役に立ってなかったということですよね。 https://teratail.com/questions/208256

退会済みユーザー

2019/08/26 03:38

質問に追記しました。要件は上記同様 No1の中にHOGEHOGEと記載していますが、このHOGEHOGEは　textarea=id　に格納されたデータを表示させたいです。つまりtextareaの背景の白や枠は不要です。

m.ts10806

2019/08/26 03:41

ええだから、なぜ要らないのにtextarea入れたのか誰にもわかりません。要らないなら使わなければいい話。それに直前の質問で同じようにできる回答をもらっているのにそれを活かそうと思わなかったんでしょうか。同じ要件なら別途質問する必要も同種の回答をする必要もないですね。直前の質問の回答で解決可能なのであとは自分で考えてください。 https://teratail.com/questions/208256

退会済みユーザー

2019/08/26 03:45

はい。わかりやすいアドバイスを頂きありがとうございました。あとは自分で考えます

m.ts10806

2019/08/26 03:47 編集

口だけはもう良いので最初から自分で考えて試して質問してください。全部「やってもらってる」だけで何一つ回答を理解していないのが分かります。質問じゃなくて作業依頼です。

退会済みユーザー

2019/08/26 03:50

じゃあ答えなければいいだろ？

m.ts10806

2019/08/26 03:56 編集

>じゃあ答えなければいいだろ？態度が急変しましたね。まあ落ち着いてください。それに答えた後にそれを言われても困りますね。 textareaっぽさ（枠線と右下の拡縮機能）を消す回答はしてますし、入力もさせたくないならreadonlyなりdisabledつけて背景色を調整すればいいだけですし。「なぜtextareが要らないのにtextareaを入れてるんですか？」って聞いてるのでそれを答えればもっと状況にあった回答ができたかと思うんですが。

kyoya0819

2019/08/26 04:00 編集

横から失礼します。 rikapyさんへ「じゃあ質問するな」ここは作業依頼の場ではなく不明点を自分で調べた上で質問し解決する場所です。作業依頼をされてもご期待のような回答をされる方はなかなかいないと思います。ちなみに自分も丸投げに一票です。解決したようでしたら自己解決にしてください。

m.ts10806

2019/08/26 04:14

追記した回答であればbackground-color:transparent;で可能ですけど、いずれにしても人のコードほぼそのまま使っておいて低評価という神経は理解できませんね。

行動規範の内容に同意します

意味がわかんないけどエスパーで

HTML
1<div style="border:groove;padding:20px" id=hoge1>
2    <textarea id="text" style="border:none;resize: none;">HOGE</textarea>
3</div>
4<script>
5  window.onload = function() {
6    var hoge2 = $('textarea[id="text"]').val();
7    $("#hoge1").empty();
8    document.getElementById("hoge1").innerHTML = hoge2;
9  }
10</script>