input表單元素的預設padding不一致問題

2022-03-15 00:49:02 字數 626 閱讀 7251

最近做的專案,發現一堆問題,input type=「text」和type=「button」

(1)在無文字的時候高度是一致的,分別寫入相同大小的文字type=「button」高度》type=「text」,查詢的資料是padding在不同瀏覽器的表現不一致,尤其是chrome,具體文章見

(2)一旦給input type=「text」設定line-height,游標會兩次變化,找的原因是:

ie:不管該行有沒有文字,游標高度與font-size一致。

ff:該行有文字時,游標高度與font-size一致。該行無文字時,游標高度與input的height一致。

chrome:該行無文字時,游標高度與line-height一致;該行有文字時,游標高度從input頂部到文字底部(這兩種情況都是在有設定line-height的時候),如果沒有line-height,則是與font-size一致。

(3)解決的方法是,三個都是必須條件:

①一定要設定高度height: 0.4rem;不要設定line-height,因為input預設文字是垂直居中的;

②如果不想讓游標充滿整個input高度,直接設定font-size大小便可控制游標;

③一定要用box-sizing控制預設的padding在設定的高度內部。

01(前端)input表單元素

其實,在半年前我對 開發還是完全不感冒的,不是沒認識,而是只認識到表面。我以為 模型就那幾樣,新聞 論壇 部落格啥的,仿個站出來有什麼意思?但現在我是知道了,大多應用開發還是採用b s架構的,包括服裝廠這些很多行業使用的都是 來管理資料。而且,開發也設計很多技術,少則html css js net,...

去除表單元素的預設樣式

禁用表單input select元素的預設外觀 禁用 select 預設下拉箭頭 ms expand 適用於表單選擇控制項下拉箭頭的修改,有多個屬性值,設定它隱藏 display none 並使用背景來修飾可得到我們想要的效果。select ms expand ms check 適用於表單核取方塊或...

vue 實現input表單元素的disabled

今天產品經理提了乙個需求 乙個api的賬號體系增加乙個checkbox控制api輸出字段,但是有三個是偽控制,事實上是介面裡面寫死的,所以是必須選中的 class checkbox class checkbox inline v for show field in form params.expor...