輸入字段中的填充頂部即

如何在IE中的輸入字段中修正填充（在此情況下是填充頂部）？輸入字段中的填充頂部即

所以，我想做一個文本字段，即。搜索文本字段。該字段在左側有一個搜索圖標，旁邊是輸入的文本，用垂直線隔開。

當字段在:focus，我想顯示一個工具提示說：ie。「在這裏輸入文字」。這個文本是裏面的這個字段佔據了字段高度的三分之一左右。

因此，在focus時，我想將場中的輸入文本向下按下三分之一的高度，所以我可以同時顯示工具提示和輸入文本，而不會使它們彼此重疊。

我設法做到了這一點只有CSS，它的作品正確在每個瀏覽器，但IE瀏覽器。

在IE瀏覽器中，輸入的文本被按下太多，所以文本的下半部分因爲溢出而丟失。

樣本：http://codepen.io/ayakashi/pen/emZVed

我的代碼：（CSS）

.form-2 label{ 
    /*positioning icon in the left side of the text field*/ 
    position:absolute; 
    padding: 0.5em 0; 
    text-align:center; 
    left:0; 
    color: rgba(0,0,0,0.6); 
    border-right: solid 1px rgba(0,0,0,0.1); 
    width: 2.5em; 
} 

.form-2 .tooltip{ 
    font-size: 0.714em; /*10px*/ 
    text-align:left; 
    padding-left: 1em; 
    font-family:Calibri, Helvetica, sans-serif; 
    font-weight:bold; 
    color:white; 
    width:21.7em; 

    /*positioning tooltip in top of text field*/ 
    position:absolute; 
    border-radius: 0 0.5em 0 0; 
    margin-left: 3.5em; 
    top:-0.5em; 
} 

input:focus{ 
    padding-top:1em; 
} 

input:focus, input:focus + .tooltip{ 
    -webkit-transition: all 0.30s ease-in-out; 
    -moz-transition: all 0.30s ease-in-out; 
    -ms-transition: all 0.30s ease-in-out; 
    -o-transition: all 0.30s ease-in-out; 
    transition: all 0.30s ease-in-out; 
}

HTML

<form role="form" class="form-2"> 
    <div>   
     <label for="exampleInputEmail1"><i class="fa fa-user fa-lg"></i></label> 
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> 
     <p class="tooltip">Username/Email address</p> 
    </div> 
</form>

來源

2014-12-13 ayakashi-ya

嘗試添加顯示：inline-block in input。 – 2014-12-13 15:24:01

確定line-height的出現解決了它IE9：

.form-2 input{ 
    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.2); 
    padding-left: 3em; 
    border-radius: 0.5em; 
    line-height: 1.1em; 
}

http://codepen.io/anon/pen/RNaQxY

來源

2014-12-13 15:23:10

我在CrossBrowserTesting（由codepen提供）中嘗試了您的解決方案，但它對我來說依然如此。 – 2014-12-13 16:11:59

我設法找到我的問題的解決方案:)

我剛剛注意到IE9和IE10有一個空格，在（使用IE9和IE10在CrossBrowserTesting.com測試）在IE9，IE10和IE11之間比較結果時，輸入字段的底部會佔用輸入文本的下半部分。

所以我加padding-bottom: 0input:focus風格去除那個空間。

它的工作原理。輸入的文本現在正確顯示。 padding-bottom：0似乎不會影響其他瀏覽器，因爲它們仍能正確顯示結果。

來源

2014-12-13 16:22:39

輸入字段中的填充頂部即

回答

相關問題