CSS表單數字屬性是開發者操作表單時需要掌握的技術之一,通過設置數字屬性,能夠實現表單樣式及功能的控制,下面通過幾個常用的數字屬性來介紹CSS表單樣式的調整。
input { border-radius: 4px; border: none; padding: 10px; font-size: 16px; }
上述代碼中的數字屬性都是經常用到的,其中border-radius
設置了輸入框的邊框圓角程度,border
去除了輸入框的邊框,padding
設置了輸入框內部的空白區域,font-size
設置了輸入框內文字的大小。
input[type=number] { width: 80px; margin-right: 5px; }
上述代碼中,input[type=number]
選擇了type為number的輸入框,通過設置width
屬性調整了其寬度大小,還通過margin-right
屬性控制了多個數值輸入框之間的間距。
input[type=range] { -webkit-appearance: none; height: 5px; background: #efefef; outline: none; margin-top: 10px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #fff; border-radius: 50%; border: 2px solid #4CAF50; margin-top: -4px; }
上述代碼中,input[type=range]
選擇了type為range的輸入框,通過設置-webkit-appearance
屬性去除了默認的樣式,height
設置了滑竿的高度,background
定義了背景顏色,margin-top
設定了輸入框的上邊距。而input[type=range]::-webkit-slider-thumb
則設置了滑塊的樣式,通過設置width
和height
控制了滑塊的大小,background
設置了滑塊的背景色,通過border-radius
設置滑塊為圓形,border
設置了滑塊的邊框樣式,margin-top
用來微調滑塊的位置。
通過這些數字屬性,我們可以對表單的樣式及功能進行精細的調整,提升用戶體驗。