Html CSS-更改搜索框的宽度

我一直试图在HTML模板的

name=“size”

中更改搜索框的宽度，但即使在尝试

width:

时也无法更改

html:

下面是一个代码笔，用于更好的上下文：

---

您是否尝试过大小属性

<input type="text" size="15"/>

---

默认情况下使用的输入元素

显示：内联display:inline块，则无法在使用该显示的元素中定义宽度您可以更改元素的宽度

input[name="size"]{
  width: 50%;
  display: inline-block; /* <--- Here the change */
}

input[name=“size”]{
宽度：50%；
display:inline block；/*我建议使用此方法

<form class="form" method="POST">

  <h1 class="text-center">Soccer Shoes Finder</h1>
  <div class="line-separator"></div>

  <div class="container ">

    <div class="row">
      <div class="col-md-4">
        <input class="form-control" name="name" type="text" placeholder="Name" />
      </div>
      <div class="col-md-7">

        <input class="form-control" name="size" type="text" placeholder="Size" /></div>

      <div class="col-md-1">
        <button class="form-control " aria-hidden="true"><i class="fa fa-search"></i></button></div>
    </div>

  </div>

</form>


足球鞋搜寻器

更新的代码笔：
它被引导默认值覆盖。特别是：

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

您需要调整选择器以修复级联：

.form-inline input.form-control[name="size"]{
  width: 50%;
}

你想要什么输出？我想把“size”搜索框的宽度削减一半。检查我的答案，你可以根据需要更改col md-值。是的，我刚刚试过你的代码笔，它可以工作，确保你使用size=“1”或size=“2”你可以根据需要更改col值以完全控制大小。我明白了，这似乎是一个更好的方法。
.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-inline input.form-control[name="size"]{
  width: 50%;
}