文本輸入容器的填充寬度

我有一個寬度變化的容器內的輸入，不僅在頁面加載之間，而且在用戶在頁面上時也會變化。我正在努力使輸入始終填充容器。我目前使用的方法在一些瀏覽器中完美工作，但不是全部。文本輸入容器的填充寬度

HTML：

<div class="container"> 
     <input type="text" /> 
</div>

CSS：

.container { 
    position: relative; 
} 
input { 
    position: absolute; 
    left: 0; 
    right: 0; 
    padding: 2px 4px; 
}

的填充使得它使得我不能只設置寬度爲100％，因爲這從使輸入到溢出由8像素填充。在某些瀏覽器上（至少在Windows上使用Chrome），輸入不受left和right css標籤的影響，只是保持默認輸入寬度。我知道我可以用js來做，但我寧願找到一個更簡單的解決方案。有沒有任何跨瀏覽器的方式來做到這一點與純CSS和沒有js？

來源

2014-01-25 Hat

我會填充和設置左和右下降到百分之幾，但是這僅僅是一個解決辦法。 –

如果您使用css屬性box-sizing: border-box;，則填充不成問題，您可以使用width:100%。

在這裏看到：CSS Tricks

下面是一個例子：jsbin

CSS：

.fill { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width:100% 
}

HTML：

<input class="fill" type="text"/>

來源

2014-01-25 00:56:59 TLindig

這完美的作品。 SO上的這個問題還有其他答案，這些問題正在被標記出來，並有各種微妙的缺陷。優秀的答案。 – MadTigger

這應該爲你工作：

http://jsfiddle.net/f5g2L/

CSS

.container { 
    width: 80%; //change to whatever 
} 
input { 
    display: block; 
    padding: 6px 12px; 
    width: 100%; 
    height: 34px; 
    font-size: 1em; 
    vertical-align: middle; 
}

HTML

<div class="container"> 
    <input type="text"> 
</div>

來源

2014-01-25 01:00:14

嘗試使用的-2px陰性切緣以抵消沿着離開你填充與瀏覽器前綴箱上漿...這樣的事情：

http://jsfiddle.net/LKxcv/

CSS：

.container { 
    width: inherit; 
} 
input { 
    padding: 2px 4px; 
    margin: 0 -2px; 
    display:block; 
    width: 100%; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;  
}

來源

2014-01-25 01:10:49 walmik

文本輸入容器的填充寬度

回答

相關問題