chrome 中的 input(text) 聚焦时移动文本

Question

我正在构建一个名为 AppStore-Icons 的网站，其中包含一个搜索框，搜索框的内容移动 up/down on focus 这样:

我只在 Chrome 和 Arabic 版本的网站上注意到这个问题，我试过了通过添加此 CSS 来修复它：

.search_box input[type="text"],
.search_box input[type="text"]:focus {
   line-height: 15px;
   vertical-align: middle;
   font-size: 45px;
   height: 65px;
}

但是没有任何效果，如何修复？？

Link to the Arabic version of the website

提前致谢..

Answer 1

尝试在 .search_box input[type="text"]

上进行设置

line-height:65px;

Answer 2

我通过添加以下 CSS 解决了问题：

.search_box input[type="text"]{
    overflow: hidden;   //so the text won't move
    padding-bottom: 0;  //so the text won't be cut
    font-size: 34px;    //so the text will be contained in the input border
}

真正的问题是我使用的 Arabic 字体 高度很大，问题显示 on focus 因为Caret（闪烁的书写光标），其高度等于字体的字符高度（仅在chrome中）

chrome 中的 input(text) 聚焦时移动文本

Text is moved when focus in input(text) in chrome

html

css

google-chrome

arabic