現場標籤不與輸入文本排列

我在表單上使用Viget's In-Field Labels plugin，但即使標籤和輸入具有相同的字體大小，相同的線條高度，相同的高度，相同的填充，相同的所有東西，輸入和標籤文本不排隊。輸入文本比標籤文本低一個像素。現場標籤不與輸入文本排列

HTML：

<div class="fieldgroup"> 
    <label for="name">Name</label> 
    <input type="text" id="name" name="name"> 
</div><!--/.fieldgroup-->

CSS：

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family: Arial; 
} 
.fieldgroup { 
    position: relative; 
} 
input[type='text'], 
label { 
    padding: 5px; 
    font-size: 16px; 
    line-height: 16px; 
    margin: 0; 
    height: 30px; 
    color: #fff; 
    display: block; 
} 
input[type='text'] { 
    border: none; 
    background: green; 
}

插件設置標籤的position到absolute和top和left屬性0。

Here's a fiddle。

我在這裏錯過了什麼？

來源

2013-06-11 kgrote

這是可能做到這一點使用幾乎100％的CSS，並避免任何引起position: absolute;

佈局流問題jsFiddle demo

訣竅是環繞文字和INPUT元素LABEL。將文本放入可以給出的元素display: inline-block; margin-right: -100%;。這將文本直接放在INPUT之下，該文本具有透明背景，因此文本通過INPUT可見。

當字段有用戶輸入時，需要一些JavaScript來使INPUT背景不透明。目前無法解決此問題...... CSS無法「檢測」非空的INPUT元素。

來源

2013-06-12 21:15:22 thirdender

該死的令人印象深刻，先生。 *該死的*令人印象深刻。 – kgrote

一個問題：第二個問題！在'toggleClass（'notEmpty'，!! input.val（））''中做？ – kgrote

我在定位工作時遇到了問題（請參閱小提琴）：http://jsfiddle.net/sX8Hq/ – kgrote

我通過調整的CSS規則，一個固定的問題：

input[type='text'], label { 
    padding: 5px; 
    margin: 0; 
    font-size: 1em; 
    line-height: 30px; 
    height: 30px; 
    color: #fff; 
    display: block; 
}

關鍵是要設置容器的高度是一樣的行高。

你可以看到效果：http://jsfiddle.net/audetwebdesign/d8Apy/7/

爲什麼這個作品???

我的猜測是瀏覽器在輸入和標籤元素之間計算匿名線框的高度。至少在FireFox中，設置行高似乎是個訣竅。

我不記得曾閱讀過與這些細節相關的CSS3規範中的任何內容。

注 - 跨瀏覽器的影響

我在幾個瀏覽器中測試這一點，我發現，如果你設置的高度和行高和使用盒大小，你會得到跨瀏覽器的問題。但是，如果您使用行高和框尺寸，結果是一致的。我沒有測試過邊界。

來源

2013-06-11 21:45:48

http://jsfiddle.net/d8Apy/12/ 只需調整標籤的大小&通過行高輸入。所以文字重疊別人，因爲他們會坐在同一行高

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family: Arial; 
} 
.fieldgroup { 
    position: relative; 

} 
input[type='text'], 
label { 
    padding: 5px; 
    margin: 0; 
    line-height:16px; 
    Font-size:16px; 
    color: #fff; 
    display: block;border:1px solid transparent 
} 
input[type='text'] { 
    border: none; 
    background: green; 
}

來源

2013-06-11 21:56:08

我在發佈幾分鐘後[更新了我的小提琴]（http://jsfiddle.net/d8Apy/5/），我將這兩個元素的行高設置爲16px。但似乎沒有工作。 – kgrote

很奇怪，我連接的小提琴怎麼樣？（http://jsfiddle.net/d8Apy/12/）哦，我知道了，你已經保持身高：30px。沒有必要，行高正在給它一個高點 –

現場標籤不與輸入文本排列

回答

相關問題