質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

2250閲覧

CSSでフォームの入力欄を大きくしたいのですが、ドロップダウンリストの入力フォームが大きく出来ずに困っています。

koume

総合スコア458

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/06/25 09:52

Rails5でアプリを作成しています。
住所の入力欄のフォームを大きくしたいのですが、ドロップダウンリストで入力する都道府県のフォームを大きくするコードが不明なのでご教授お願いします。
イメージ説明
現在、このようになっておりコードは以下のようにしています。

_form.html.erb <%= FormPresenter.new(f, self).notes %> <fieldset id="prefecture-fields"> <legend>都道府県・市区町村の検索</legend> <%= render 'prefecture_fields', f: f, confirming: false %> </fieldset>
_prefecture_fields.html.erb <%= f.fields_for :request, f.object.request do |ff| %> <%= markup do |m| p = PrefectureFormPresenter.new(ff, self) p.with_options(required: true) do |q| m << q.drop_down_list_block(:prefecture, '都道府県', Request::PREFECTURE_NAMES) m << q.text_field_block(:city, '市区町村', size: 16) end end %> <lo> <strong><P>混雑時にはお隣の市区町村を調べてみては?</P></strong> </lo> <% end %>
prefectur_form_presenter.rb class PrefectureFormPresenter < FormPresenter def prefecture_block(name, label_text, options = {}) markup(:div, class: 'input-block') do |m| m << decorated_label(name, label_text, options) m << text_field(name, options) m << error_messages_for(name) end end def city_block(name, label_text, options = {}) markup(:div, class: 'input-block') do |m| m << decorated_label(name, label_text, options) m << text_field(name, options) m << error_messages_for(name) end end end
form_presenter.rb class FormPresenter include HtmlBuilder attr_reader :form_builder, :view_context delegate :label, :text_field, :password_field, :check_box, :radio_button, :text_area, :object, to: :form_builder def initialize(form_builder, view_context) @form_builder = form_builder @view_context = view_context end def notes markup(:div, class: 'notes') do |m| m.span '*', class: 'mark' m.text '印の付いた項目は入力必須です。' end end def text_field_block(name, label_text, options = {}) markup(:div, class: 'input-block') do |m| m << decorated_label(name, label_text, options) m << text_field(name, options) m << error_messages_for(name) end end def password_field_block(name, label_text, options = {}) markup(:div, class: 'input-block') do |m| m << decorated_label(name, label_text, options) m << password_field(name, options) m << error_messages_for(name) end end def date_field_block(name, label_text, options = {}) markup(:div, class: 'input-block') do |m| m << decorated_label(name, label_text, options) m << text_field(name, options) m << error_messages_for(name) end end def drop_down_list_block(name, label_text, choices, options = {}) markup(:div, class: 'input-block') do |m| m << decorated_label(name, label_text, options) m << form_builder.select(name, choices, { include_blank: true }, options) m << error_messages_for(name) end end def error_messages_for(name) markup do |m| object.errors.full_messages_for(name).each do |message| m.div(class: 'error-message') do |m| m.text message end end end end private def decorated_label(name, label_text, options = {}) label(name, label_text, class: options[:required] ? 'required' : nil) end end
_dimensions.scss /* マージン、 パディング */ $narrow: 2px; $moderate: 6px; $wide: 10px; $very_wide: 20px; /* フォントサイズ */ $tiny: 8px; $small: 10px; $normal: 12px; $large: 16px; $huge: 20px; /* 行の高さ */ $standard_line_height: 16px;
form.css.scss @import 'colors'; @import 'dimensions'; div#wrapper { font-size: $huge; div#container { div#generic-form { text-align: center; width: auto; margin: $very_wide auto; padding: $very_wide; border-radius: $wide; border: solid 4px $dark_cyan; background-color: $very_light_gray; font-size: $huge; input[type='text'], input[type='text'] { #ここで大きくしたいのですが・・・ padding: $wide; width: 400px - $wide * 4; font-size: $huge; }

上のform.css.scssで図のように市区町村の入力フォームは大きくできました。
input[type='text']が2つならんでいますが、2つ目で都道府県のフォームを指定すればいいのだと思いますが、テーブル名、カラム名などを入力しても反映されません。
input要素にtype属性を指定してフォームの入力欄を大きくすればいというのはわかりますすが、都道府県の入力フォームにどうやってtype属性を指定すればいいのかわかりません。
同じ大きさで都道府県のフォームも大きくしたいのですが、input[type='text'] に
どのように記述すればいいのでしょうか?
都道府県のテーブル名は「request」カラム名は「prefecture」です。

やってみたこと
input[type='request'] input[type='prefecture'] input[type='fieldset']
input[type='legend'] input[type='drop_down_list'] など、さまざま入力して
みましたが、都道府県の入力欄は大きくできませんでした。

どのようにしたら大きく出来るのかご教授お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

input要素にtype属性を指定してフォームの入力欄を大きくすればいというのはわかりますすが

いえ、ドロップダウンは<input>ではなく<select>要素です。selectにCSSをかければいいかと思います。

投稿2019/06/25 09:54

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koume

2019/06/25 10:43

回答回答ありがとうございます。 お陰様で、思った通りの大きさにできました。 いつも、的確な回答で本当に助かります。 今後とも宜しくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問