input之placeholder與行高的問題。

2022-07-26 21:24:15 字數 1795 閱讀 8100

我們實現乙個輸入框的視覺的時候為了保持其各種各樣的相容性:

1.滑鼠要跟文字一樣高度。

2.文字要居中對齊。

3.還要有placeholder

第乙個目標,當實現乙個高度為40畫素的高度輸入框時,為了與滑鼠對齊,我們會預設輸入框的高度與字型高度差不多高度。多了會顯得輸入游標過高。

第二個目標,文字居中對齊的話我們會設定line-height與輸入框高度一致。

所以有了這段  

css為:.ceshi-input

下面是展示效果:

以上經測試在所有瀏覽器中顯示一致。

但素::::::

為了有placeholder,我們默默的加上了placeholer屬性,於是有了:

然後一看效果:

明顯不是一樣對齊的呀。嗷。

修改辦法:

ie9包括其本身以下的輸入框裡面的文字對齊方式是預設頂對齊。

其他的預設是居中,placeholder在沒有line-height的情況下是和value一樣對齊的。

所以取個居中和頂對齊的和諧位置就是把可輸入區域的高度與字型大小相差無幾。這樣就看起來差不多了。

不設定line-height;其他的空餘區域用padding頂出來就可以做到輸入游標與字型大小一致和諧。

又有方案說直接設定line-height:normal;就可以。不懂其中原理。

而且還可以直接作用於placeholder,如:

input::-webkit-input-placeholder
我們實現乙個輸入框的視覺的時候為了保持其各種各樣的相容性:

1.滑鼠要跟文字一樣高度。

2.文字要居中對齊。

3.還要有placeholder

第乙個目標,當實現乙個高度為40畫素的高度輸入框時,為了與滑鼠對齊,我們會預設輸入框的高度與字型高度差不多高度。多了會顯得輸入游標過高。

第二個目標,文字居中對齊的話我們會設定line-height與輸入框高度一致。

所以有了這段  

css為:.ceshi-input

下面是展示效果:

以上經測試在所有瀏覽器中顯示一致。

但素::::::

為了有placeholder,我們默默的加上了placeholer屬性,於是有了:

然後一看效果:

明顯不是一樣對齊的呀。嗷。

修改辦法:

ie9包括其本身以下的輸入框裡面的文字對齊方式是預設頂對齊。

其他的預設是居中,placeholder在沒有line-height的情況下是和value一樣對齊的。

所以取個居中和頂對齊的和諧位置就是把可輸入區域的高度與字型大小相差無幾。這樣就看起來差不多了。

不設定line-height;其他的空餘區域用padding頂出來就可以做到輸入游標與字型大小一致和諧。

又有方案說直接設定line-height:normal;就可以。不懂其中原理。

而且還可以直接作用於placeholder,如:

input::-webkit-input-placeholder

我對linux理解之input一

我們先看下input的註冊過程 input register device input dev int input register device struct input dev dev if dev getkeycode 如果沒設定,則設定成預設的 dev getkeycode input de...

Linux裝置驅動之 input子系統

什麼是input input子系統處理輸入事務,任何輸入裝置的驅動程式都可以通過input輸入子系統提供的介面註冊到核心,利用子系統提供的功能來與使用者空間互動。輸入裝置一般包括鍵盤,滑鼠,觸控螢幕等,在核心中都是以輸入裝置出現的。下面分析input輸入子系統的結構,以及功能實現。linux中inp...

Linux驅動之input輸入子系統

input輸入子系統在實際專案中用的也比較多,按鍵,觸控螢幕,滑鼠,鍵盤等,用來實現核心層和應用層資料之間的傳遞,這裡得說明不只有input,還有copy to user等,利用input的好處是我們用自己上傳資料到應用程式,我們直接上報這個事件發生了,input自帶的機制會實現上傳的功能。還有很多...