如何设置rails的'number_field_tag'样式？

Question

无法从中找到任何我需要的东西。 下面的附图是使用“number_field_tag”时在rails 4中生成的表单默认值。

无论如何用CSS来设计它？我似乎找不到任何指导。 如果它不能用CSS设置样式，我将从头开始探索CSS + javascript。欣赏投入！

Rails中“number_field_tag”的默认表单

Answer 1

您是否尝试过此操作，nil是此处的默认值

= number_field_tag :some_field, nil, class: 'some-class'

希望有所帮助！

Answer 2

您可以使用文字input和button元素代替number_field_tag来控制样式。

您可以添加任意数量的样式（您甚至可以将div标记内的所有内容都包含在样式中），您只需要控制值增量。如果您添加readonly属性（就像我一样），您甚至不需要检查该值是否为数字。

查看这个简单的演示：

＆＃13;

＆＃13;

$(document).ready(function() {
  $('#minus').on('click', function() {
    $('#number').val(function(i, value) { return --value });
  });

  $('#plus').on('click', function() {
    $('#number').val(function(i, value) { return ++value });
  });
});

＆＃13;

.number-button, .number-input {
  border: 0;
  background-color: transparent;
  padding: 0;
}

.number-input {
  width: 15px;
  text-align: center;
  font-size: 12px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="minus" class="number-button">-</button>
<input type="text" id="number" class="number-input" value="0" readonly />
<button id="plus" class="number-button">+</button>

＆＃13;

＆＃13;

＆＃13;