文字框css樣式

2021-05-26 07:55:39 字數 992 閱讀 4209

input

textarea

先看看在網頁中經常出現的按鈕與文字框的本來面目吧,如圖1!

圖1 網頁中的文字框、按鈕

對照上圖,我們怎麼樣才能改變文字框與按鈕的模樣呢?那在下面我為大家提供兩種文字框與按鈕樣式作為例子參考,第一種是文字框與按鈕無立體感,只是有線條顏色與填充顏色的,這種效果大家可能在很多**上都看見過,給人一種特別的感覺,很不錯的,第二種效果就比較特殊了,是將文字框做成一種類似於下劃線的效果並且是彩色的,同時按鈕的背景色也不再是灰色,而是彩色的,可以說這是一種非常酷的效果,好了,下面我就來說說這兩種效果實現的詳細操作步驟吧。

第一種效果:無立體效果的文字框與按鈕

那我們就通過在dw3中網頁的編輯操作為例來進行說明,首先我們已經在網頁中插入了相應的表單物件,比如插入乙個文字框與乙個按鈕,此時,我們在按下[f10]鍵,顯示出網頁源**編輯視窗,那我們在網頁的標籤之間插入這個樣式表:

class=smallinput

比如在與這個文字框與按鈕的htm語句中加入了這句**。最後的效果如下圖2:

圖2 css定義平面按鈕

怎麼樣,比起前面那張圖中的標準按鈕來說是不是美觀多了,要實現起來其實也不是太難吧。

第二種效果:帶顏色的下劃線式文字框與按鈕效果

同樣,我們也需要樣式表的幫助來實現這個效果,和第一種效果的操作步驟一樣在網頁的標籤之間插入樣式表:

大家從上面的樣式表中可以看出,這個效果的實現是通過兩個樣式來實現的,乙個是文字框的,乙個是按鈕的,所以在文字框與按鈕的htm語句中就需要插入兩句不同的**,在文字框中插入的是class=smallinput** 如例子 ,在按鈕語句中插入的是 class="buttonface"**如例子其實這就對應了樣式表中文字框與按鈕的樣式,最後的效果如下圖3所示:

圖3 css定義彩色按鈕

看看上面的效果,還會不會讓您想起那單調的文字框與按鈕呢?以上兩種效果的方法都是通過樣式表來實現的,使用方法也十分的簡單。

Css文字框樣式

1 只有下劃線的文字框 2 軟體序列號式的輸入框 3 軟體序列號式的輸入框 完整版 4 輸入框景背景透明 5 滑鼠劃過輸入框,輸入框背景色變色 mouseover this.style.bordercolor black this.style.backgroundcolor plum style w...

文字框的樣式

文字框樣式大全 收藏 輸入框景背景透明 滑鼠劃過輸入框,輸入框背景色變色 style width 106 height 21 nm use ut this.style.bordercolor black this.style.backgroundcolor ffffff style border w...

一些CSS文字框樣式

1 只有下劃線的文字框 2 軟體序列號式的輸入框 3 軟體序列號式的輸入框 完整版 4 輸入框景背景透明 5 滑鼠劃過輸入框,輸入框背景色變色 mouseover this.style.bordercolor black this.style.backgroundcolor plum style w...