textareaタグの中をクリックすると、途中にカーソルが表示される

Question

◎解決したいこと

画像のようにtextareaタグの中をクリックするとなぜか選択している縦の棒が1行目の1文字目にカーソルが当たるのではなく、途中からスタートしてしまいます。

これをtextareaをクリックすると1行目の1文字目の部分にカーソルが当たるようにしたいです。

◎試したこと

textarea自体のCSSを確認しましたが、paddingなど指定していなかったので、違う部分で問題が出ていると考えられます。

◎コード

・HTML（textareaの部分）

<textarea name="" id="" cols="30" rows="10" class="form__item__textarea">
</textarea>

・CSS（textareaの部分）

.form__item__textarea {
    max-width: 530px;
   width: 100%;
   border-radius: 5px;
}

フォーム全体のHTML

<div class="contact__form">
                    <div class="form">
                        <div class="form__item">
                            <p class="form__item__label">
                                お名前
                            </p>
                            <input type="text" class="form__item__input" placeholder="お名前を入力してください">
                        </div>
                    </div>

                    <div class="form">
                        <div class="form__item">
                            <p class="form__item__label">
                                メールアドレス
                            </p>
                            <input type="text" class="form__item__input" placeholder="メールアドレスを入力してください。">
                        </div>
                    </div>

                    <div class="form">
                        <div class="form__item">
                            <p class="form__item__label">
                                ご用件
                            </p>
                            <textarea name="" id="" cols="30" rows="10" class="form__item__textarea">
                            </textarea>
                        </div>
                    </div>

                </div>

・フォーム全体のCSS

.contact__form {
            background: #fff;
            max-width: 700px;
            max-height: 500px;
            width: 100%;
            height: 100%;
            padding: 70px 0 50px 90px;
            .form {
                .form__item {
                    padding-bottom: 50px;
                    .form__item__label {
                        font-size: 1.6rem;
                        letter-spacing: 0.05em;
                        padding-bottom: 15px;
                    }
                    input {
                        max-width: 360px;
                        width: 100%;
                        font-size: 1.6rem;
                        letter-spacing: 0.05em;
                        color: #666;
                        padding: 15px 0 15px 20px;
                        border:1px solid #ff0000;
                        border-radius: 5px;
                        border-color: #666;
                    }
                    .form__item__textarea {
                        max-width: 530px;
                        width: 100%;
                        border-radius: 5px;
                    }
                }
            }
        }

Answer 1

<textarea name="" id="" cols="30" rows="10" class="form__item__textarea"><!-- ここから
          ここまでの空白  --></textarea>

textareaを設置する場合は中には改行やインデントもつけないのが確実です。

<textarea name="" id="" cols="30" rows="10" class="form__item__textarea"></textarea>

Comments

[退会済みユーザー]

解決できました！ありがとうございました！

[m.ts10806]

たぶんこの手の問題は過去にも質問で出てますよ。
paddingでしたらマウス選択できませんので、そこらへんで問題切り分けも出来るかと思います。

Answer 2

改行とインデントを削除してみてはいかがでしょうか。内部のテキストと解釈されていると思います。

<textarea name="" id="" cols="30" rows="10" class="form__item__textarea"></textarea>

Comments

[退会済みユーザー]

解決できました！丁寧にありがとうございました！