用CSS來解決輸入框和按鈕對不齊的問題

2021-08-24 21:13:16 字數 1037 閱讀 2335

今天我將介紹一下如何使用css中的背景來設計你的搜尋框。之前我使用別的方法來實現我的表單和搜尋框,但是這種方法看起來會更容易些,所以我想將它與感興趣的朋友分享。

首先來讓我們看看我的原始的使用<inputtype=」image」 src=」image_url」 />的方法:

這看起來挺不錯的,但是它有乙個不好的地方,這個按鈕不會和搜尋框對其,我必須使用乙個負的margin-top屬性來修正這個bug。

在這個改良版的方法中,我決定不再使用 type=」image」 ,而是使用標籤,然後用css新增背景。這允許文字輸入框和按鈕自動對齊。我同樣新增了a:focus偽類到最終效果(ie將不會支援這個,所以我新增了乙個特殊的樣式針對ie來隱藏這個效果)。 下面是這種方法的一些好處:

html

css

fieldset.search

.searchinput, .search button

.searchinput.box

.searchinput.box:focus

.search button.btn

.search button.btn:hover

ie特別注釋

ie 樣式- ie.css

關於標籤的使用,在ie和ff下測試效果都不一樣,個人解決設定type="submit"屬性

用CSS控制輸入框input懸停互動樣式

製作表單的時候,實現滑鼠懸停互動效果有多種方法 1 在xhtml中直接寫入onmouseover onmouseout 指令碼就可以實現了,但這樣就違背了web標準所倡導的內容 表現相分離的原則。以後若要對此進行修改也將會很繁瑣。這樣直接寫入xhtml也會讓頁面 增加,如果只是乙個input輸入框或...

移動端 對高度自適應的輸入框說不

核心想法 this height this.scrollheight textarea.addeventlistener input function var currentlength this.scrollheight if lastheight currentheight this.style...

移動端 對高度自適應的輸入框說不

核心想法 this height this.scrollheight textarea.addeventlistener input function var currentlength this.scrollheight if lastheight currentheight this.style...