CSS-更改搜索框的宽度

我试图更改我的HTML模板的name="size"搜索框的宽度，但即使在我尝试width:时也无法执行此操作。CSS-更改搜索框的宽度

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

来源

2017-03-10 tadm123

你要输出什么？ – Aslam

我希望将“大小”搜索框切成宽度的一半。 – tadm123

查看我的答案，您可以根据需要更改col-md-value。 – Aslam

我推荐使用这种方法。

<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

来源

2017-03-10 04:08:06 Aslam

你可以根据你的需要改变col值来完全控制尺寸。 – Aslam

我明白了，似乎是一种更好的方式。 – tadm123

你尝试大小属性？

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

来源

2017-03-10 04:05:42

雅我刚刚试过你的codepen它的工作原理，确保你使用size =“1”或size =“2” –

元素默认display: inline;使用的输入，你不能定义使用显示谁在元素的宽度，如果你改变显示器display: inline-block;你可以改变你的元素的宽度。

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

来源

2017-03-10 04:05:58

它越来越被引导默认覆盖。具体做法是：

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

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

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

来源

2017-03-10 04:15:35 frattaro

CSS-更改搜索框的宽度

回答

相关问题