CSS-検索ボックスの幅を変更する

Question

私はname="size"のHTMLテンプレートの検索ボックスの幅を変更しようとしていましたが、試してみてもできません。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%; 
} 

ここでは、より良い状況についてcodepenです：

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

Answer 1

この方法の使用をお勧めします。

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

更新Codepen： http://codepen.io/hunzaboy/pen/aJJpMK

Answer 2

あなたはsize属性を試してみたのですか？

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

Answer 3

入力要素がデフォルトdisplay: inline;で使うdisplay: inline-block;へのご変更、ディスプレイがあなたの要素の幅を変更することができますならば、あなたは、そのディスプレイを使用して要素の幅を定義することはできません。

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

Answer 4

これは、ブートストラップのデフォルト設定で上書きなっています。具体的に：あなたはカスケードを修正するために、あなたのセレクタを調整する必要が

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

：あなたは

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