MW WP Form テキスト入力欄の幅をレスポンシブに

  • 解決済 pipopapo025

    (@pipopapo025)


    9年、 3ヶ月前

    MW WP Form テキスト入力欄の幅をレスポンシブにしたいです。
    サイズを指定した入力欄はモバイル画面になってもサイズが変わらずはみ出してしまいます。
    @mediaのモバイルの場合の記述で

    #content form textarea{width:90%;}

    としても、テキストエリアのみに適用され、テキストフィールド（名前、電話番号など）は変わりません。

    ソースを見てみると設定していない

    maxlength=”255″

    という記述がありましたがこれが関係するのでしょうか？

    ちなみに現在は
    名前、ふりがな、電話番号はsize=”20″
    住所、メールアドレスはsize=”60″
    という設定です。モバイルの際はすべてWidth:90%で表示するようにしたいです。

    記述方法をご教授願います。よろしくお願いします。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • モデレーター gatespace

    (@gatespace)

    9年、 3ヶ月前

    MW WP Form と言うよりはHTML要素とCSSで頑張ればOKです。
    テキストフィールドはテキストエリアとはタグ自体が異なるので、cssの書き方もそれに合わせないとダメですよ。
    http://www.htmq.com/html5/input.shtml

    maxlength=”255″

    maxlength属性は入力欄の幅ではなく、入力可能な文字数です。

    Takashi Kitajima

    (@inc2734)

    9年、 3ヶ月前

    #content form textarea{width:90%;}

    これだと textarea にしかスタイルが当たっていないので、

    #content form textarea,
#content form input[type="text"] {
    width:90%;
}

    とするとどうでしょうか。

    トピック投稿者 pipopapo025

    (@pipopapo025)

    9年、 3ヶ月前

    ありがとうございます。
    #content form input[type="text"]
    の記述で適用されました。

    郵便番号入力欄も90％になってしまったので
    #content form .mwform-zip-field input[type=text]{ width:auto;}
    も追加で記述しました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「MW WP Form テキスト入力欄の幅をレスポンシブに」には新たに返信することはできません。