CSS例項 二 靈活使用Input元素

2021-08-27 14:27:08 字數 947 閱讀 9234

在web開發過程中,資訊錄入介面中,經常會有乙個特殊的輸入元素,如:必填字段、日期選擇字段、在彈出視窗中選值的字段,使用css來設定這些元素的外觀,可以省去一些不必要的按鈕、提示,使頁面更加簡潔。

效果如下:

實現這樣的效果,只須一張:

css**很簡單:

html**

>

<

html

xmlns=""

xml:lang="zh-cn"

dir="ltr"

>

<

head

>

<

title

>隔壁老王- css技術**

title

>

head

>

<

style

type="text/css"

>

.input1,.input2,.input3

.input2

.input3

style

>

<

body

>

<

h2>靈活使用css,控制input元素的外觀,<

br/>可以省去一些不必要的按鈕、提示。

h2>

<

input

class="input3"

value="靈活使用css,必填字段"

/>

br>

br>

<

input

class="input1"

value="wallimn"

/>

br>

br>

<

input

class="input2"

value=""

/>

body

>

html

>

CSS例項 二 靈活使用CSS控制Input元素

在web開發過程中,資訊錄入介面中,經常會有乙個特殊的輸入元素,如 必填字段 日期選擇字段 在彈出視窗中選值的字段,使用css來設定這些元素的外觀,可以省去一些不必要的按鈕 提示,使頁面更加簡潔。效果如下 align center img upload attachment 75446 b8dbd1...

教你如何使用css隱藏input的游標

今天公司的ui突然跑過來問我乙個問題 如何在不影響操作的情況下,把input的游標隱藏了?我相信很多人會跟我一樣,覺得這是個什麼狗屁需求,輸入框不要游標這不是 嗎?可惜我們只是個小小的擼碼仔,沒有反駁的權利只能默默接受 在網上搜尋了很多方式 用div模擬,設定readonly,設定disabled,...

CSS3 font face使用例項

windows10作業系統使用例項 1.準備好對應格式的字型庫 2.方正字型使用例項 中文內容 p br p class txttwo abc p body html ie下顯示結果 google ff下顯示結果 android系統下的瀏覽器訪問 3.花紋行楷字型使用 中文內容 p br p cla...