實現帶Icon的Input登入框布局

2021-09-14 08:54:04 字數 1885 閱讀 6569

實現

基本思路

注意position:relative脫離文件流,但是其本身的位置是在文件中佔據空間的

如:

運用position:relative調整位置後,達到效果,卻有著視覺「空行」的效果

是因為文件流中,仍然為div-icon預留了它本身應有的位置,非手動新增的margin、padding等

因效果的需要,我們需要在input聚焦後,單獨設定樣式。

outline:none;清除預設的input選中外邊線,再設定我們自定義的border

我們需要製作的圓角有:input的四個角+div-icon的左上角+div-icon的左下角

需要用到的屬性:border-radius,border-top-left-radius,border-bottom-left-radius

理想情況是——圓角都統一設定為5px,一定能完美巢狀!

動手製作後???

行吧,數學知識用起來…(共用乙個圓心,半徑不一樣!畫得不咋地~)

border-radius設定的px就是指的半徑。

我們現在把外層input的border-radius:5px

裡層div-icon的border:radius:4px

看效果,完成!

可以嘗試用vertical-align設定

我是用js原生實現的

提取dom->監聽dom->發生改變時,修改div-icon樣式

(多想在原生css裡寫if判斷…)

相容的帶樣式的INPUT

style 作用描述 給input新增美化的樣式,相容ie8,ie9,ff,chrome,safari等 效果描述 1.邊框帶圓角 2.指定input高度 3.input文字上下居中,新增左邊距 4.背景色為白色 5.當input獲得游標的時候,邊框高亮顯示天藍色。6.ie7下沒有高亮效果 7.ch...

在input中實現輸入純數字(帶小數點)

今天再做表單時遇到乙個問題 就是如何在input標籤裡實現只能輸入數字,若輸入字母或者漢字時會有提示資訊,查閱網上的很多資料,只找到了阻止輸入英文本母的 所以下午的研究了一下怎麼實現只輸入數字!以下為原生js的 html 請輸入數字 js var txt document.getelementbyi...

python帶登入的爬蟲指令碼

建立cookiejar的例項 cookie cookiejar.cookiejar 常見cookie的管理器 建立http請求的管理器 生成https管理器 建立請求管理器 登入函式,cookie在opener裡 def login try 負責首次登入,輸入使用者名稱和密碼,用來獲取cookie ...