如何使 HTML 输入自动使用并忽略默认大小属性值 20

Question

当大小不存在时，是否可以使输入忽略默认大小属性值 20。我希望它像选择框一样随容器缩放（参见示例）。

看看这个例子，当我将大小设置为 1 时它可以工作但没有大小最小大小是 20...

HTML

<div class="form-item-group">
  <div class="form-item">
    <label>Label 1</label>
    <input placeholder="Value" />
  </div>

  <div class="form-item">
    <label>Label 2</label>
    <input size='1' placeholder="Value" />
  </div>

  <div class="form-item">
    <label>Hello world</label>
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>
</div>

SCSS

.form-item-group {
  .form-item {
    float: left;
    margin-right: 10px;
  }

  label {
    display: block;
  }
  input {
    display: inline-block;
    width: 100%;
  }

  select {
    display: inline-block;
    width: 100%;
  }
}

http://jsfiddle.net/L6Lytsfj/3/

Answer 1

你可以用 jQuery

做类似的事情

 $('input').filter(function(){
         return !$(this).attr('size');
    }).attr('size','1');

如果未指定尺寸属性，这会将尺寸属性设置为 1。

如何使 HTML 输入自动使用并忽略默认大小属性值 20

How to make HTML input get automatic with and ignore default size attribute value of 20

html

css

styles