html - 制作不同大小的文本框

标签 html css ruby-on-rails

我有一些用户可以填写的字段(例如姓名、电话号码、公司)。文本框大小适中,除了一个是“注释”字段。与其他文本框字段相比,我希望注释文本框非常大,但我只能使所有文本框大小相同。

_form.html.erb/vendors

<%= form_for @vendor do |f| %>

#this text field will be a regular size
  <p>
    <%= f.label :company %><br>
    <%= f.text_field :company %>
  </p>

#more code...

#I want this text field to be large
 <body>
     <div class = "notes">
         <p>
             <%= f.label :notes %><br>
             <%= f.text_field :notes %>
        </p>
     </div>
 </body>

  <p>
    <%= f.submit %>
  </p>

</div>  

<% end %>

我的CSS文件

input[type=text]{
    width: 40%;
    padding: 12px 12px;
    border: 2px solid #ccc;
    background-color: white;
}


textarea {
    width: 20%;
    height: 10px;
    padding: 12px 12px;
    border: 2px solid #ccc;
    background-color: white;
    resize: none
}

#more code...

最佳答案

您可以为该输入添加一个具有您想要的样式(宽度)的类:

.large-box {
  width: 60% !important;
}

然后,将其添加到您的输入:

<%= f.text_field :notes, class: "large-box" %>

关于html - 制作不同大小的文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44370859/

相关文章:

html - 我的图像没有占据页面的整个宽度

html - 仅在图标而非名称上切换类别导航

javascript - 包装 div 中的每个单词会导致性能问题

SQL查询以查找具有最多指定标签的事物

ruby-on-rails - rails : list accepted values of "validates :inclusion" field

html - 图像未在 SVG arc (HTML) 中居中

javascript - 允许滚动固定父元素的绝对子元素

jquery - 图像在较小的窗口向上滑动(Bootstrap)

css - ionic : is there any way to enlarge the text input field?

ruby-on-rails - 无法在 Ubuntu 12.04LTS 上安装 ruby​​-oci8