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-更改搜索框的寬度

回答

相關問題