如何使用 CSS 使 simple_form 输入字段更宽？答案

【问题标题】：How to make simple_form input field wider with CSS?如何使用 CSS 使 simple_form 输入字段更宽？
【发布时间】：2013-08-23 22:29:34
【问题描述】：

我们正在尝试使 simple_form 输入字段更宽。这是发布在 GitHub 上的 simple_form css：

/* ----- SimpleForm Styles ----- */

.simple_form div.input {
  margin-bottom: 10px;
  clear: both; /* Required for Webkit, but not for Gecko */
}

.simple_form label {
  float: left;
  width: 100px;
  text-align: right;
  margin: 2px 10px;
}

div.boolean, .simple_form input[type='submit'] {
  margin-left: 120px;
}

div.boolean label, label.collection_radio_buttons {
  float: none;
  margin: 0;
}

label.collection_radio_buttons {
  margin-right: 10px;
  vertical-align: -2px;
  margin-left: 2px;
}

.field_with_errors {
  background-color: #ff3333;
}

.simple_form .error {
  clear: left;
  color: black;
  display: block;
  margin-left: 120px;
}

.simple_form .hint {
  clear: left;
  margin-left: 120px;
  color: #555;
  display: block;
  font-style: italic;
}

input.radio {
  margin-right: 5px;
  vertical-align: -3px;
}

input.check_boxes {
  margin-left: 3px;
  vertical-align: -3px;
}

label.collection_check_boxes {
  float: none;
  margin: 0;
  vertical-align: -2px;
  margin-left: 2px;
}

Or in SASS format:

/* ----- SimpleForm Styles ----- */

.simple_form
  div.input
    margin-bottom: 10px
    clear: both

  label
    float: left
    width: 100px
    text-align: right
    margin: 2px 10px

  .error
    clear: left
    color: black
    display: block
    margin-left: 120px

  .hint
    clear: left
    margin-left: 120px
    color: #555
    display: block
    font-style: italic

div.boolean, .simple_form input[type='submit']
  margin-left: 120px

div.boolean label, label.collection_radio_buttons
  float: none
  margin: 0

label.collection_radio_buttons
  margin-right: 10px
  vertical-align: -2px
  margin-left: 2px

.field_with_errors
  background-color: #ff3333

input.radio
  margin-right: 5px
  vertical-align: -3px

input.check_boxes
  margin-left: 3px
  vertical-align: -3px

label.collection_check_boxes
  float: none
  margin: 0
  vertical-align: -2px
  margin-left: 2px

我们在div input {} 中尝试了一些选项，但字段宽度没有变化。不确定哪个部分用于输入字段的布局。如何通过修改上面的 CSS 让输入框变宽？

【问题讨论】：

标签： css ruby-on-rails simple-form

【解决方案1】：

添加：

width: 600px:

收件人：

.simple_form div.input { }

以 600px 为例。谷歌“输入 .width CSS”了解更多信息。

如果您只想将其应用于文本字段，请使用 input[type=text]

【讨论】：

试过了，没用。我们可以指定一个百分比吗？
可以使用百分比，是的。我无法具体评论为什么它在没有看到 HTML（或 erb HTML）的情况下无法工作。
意识到我读错了 CSS。这样做： input { width: 600px: } 您可以使用 input[type=text] {} 使其更具体，仅用于文本字段，或者给输入一个类并执行 input.classname {}
尝试宽度：600px；在 .simple_form div.input {} 和 .simple_form input {} 中发现对宽度没有影响。
您确定您正在查看的页面上完全加载了 CSS 吗？ FireBug for Firefox 是一个很好的调试工具，因为它可以让您查看正在应用的 CSS - 它可能被其他 CSS 覆盖 - 尝试在 width "input { width: 600px !important;} 之后添加 !important - 这应该阻止它被覆盖。您是否有指向该页面的链接或其他内容，因为它可能是任意数量的内容而无需更多信息。