CSS- 更改搜索框的宽度

Question

我一直在尝试更改 HTML 模板 name="size" 中搜索框的宽度，但即使我尝试 width: 也无法做到。

html:

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

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

            <div class="container-fluid form-inline">

                <input class="form-control" name = "name" type="text" placeholder="Name"/>
                <input class="form-control" name = "size" type="text" placeholder="Size"/>
                <button class="form-control fa fa-search" aria-hidden="true"></button>
            </div>

</form>

css 元素：

input[name="size"]{
  width: 50%;
}

这里有一个更好的上下文代码笔：

http://codepen.io/tadm123/pen/ZLVWpd

Answer 1

你试过尺码属性吗？

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

Answer 2

输入元素默认使用 display: inline;，您不能在使用该显示的元素中定义宽度，如果您将显示更改为 display: inline-block;，您将可以更改元素的宽度。

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

Answer 3

我推荐使用这种方法。

<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>

更新代码笔： http://codepen.io/hunzaboy/pen/aJJpMK

Answer 4

它正在被 bootstrap 默认值覆盖。具体来说：

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

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

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

Answer 5

假设您有一个 class-name（在 HTML 中定义）的 inputText（名称）。添加这些行将有所帮助 (clean-way/simple).

.inputText{
//...
width:200px;
transition: width .4s ease-in;

}
.inputText:hover, .inputText:focus{
width:400px;
}

CSS- 更改搜索框的宽度

CSS- Changing the width of a search box

html

css

width

search-box