造型光標在文本輸入與CSS

enter image description here

下面表格是HTML

<form class="search-form" action="index_submit" method="get" accept-charset="utf-8"> 
    <input type="search" name="search" placeholder="Search here..."> 
    <button type="submit"><i class="fa fa-search"></i></button> 
    <div class="clearfix"></div> 
</form>

這裏是我的CSS

.search { 
    position: static; 
} 

.search-box { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

.search-form input[type="search"] , .search-form button { 
    outline: none; 
    border: none; 
    padding: 10px; 
    margin: 0; 
    float: left; 
    color: black; 
} 

.search-form input { 
    background-color: yellow; 
} 

.search-form button { 
    text-align: center; 
}

我在該文本字段中閃爍的光標遇到了問題。我想讓光標在中間垂直對齊。我給了填充，但它不工作。我想讓CSS自定義該遊標。謝謝。

來源

2014-10-12 Gaurav Deshpande

看起來Chrome和Firefox精細改變了我的CSS。您正在測試哪個瀏覽器？ – 2014-10-12 06:58:48

它似乎工作正常。 – 2014-10-12 07:23:31

嘗試添加「text-align：center」到您的搜索欄輸入樣式。我不確定你是否想要它，所以光標不顯示？如果這就是你的意思，看看這個鏈接。

Hide textfield blinking cursor

來源

2014-10-12 07:07:46 KGSB

我已經找到了精確解。我使用引導3，並在我發現以下CSS

input, button, select, textarea { 

    font-family: inherit; 
    font-size: inherit; 
    line-height: inherit; 
}

所以問題是在line-height: inherit;。因爲它繼承了父容器的行高，所以光標位於中心之上。

我剛加入line-height: initial;

來源

2014-10-12 07:49:33

造型光標在文本輸入與CSS

回答

相關問題