1. 程式人生 > >更加美化輸入框的方法

更加美化輸入框的方法

點擊 寬高 創建 用戶 一個 border borde 自己的 order

在使用input輸入框的時候經常會遇到想要讓輸入框裏顯示的內容變得更加漂亮多樣

今天我和大家分享的就是如何使輸入框設計得更適合自己的想法。

首先,我們創建一個輸入框input

然後我們就可以使用

padding-left:n px;(n是作者自己設定)

這段代碼的作用是使輸入框的內容縮進,不過它也會使邊框的寬度增加,

所以增加了多少縮進,就得減少多少邊框的寬度。

border:1px solid red;(粗細,樣式,顏色)

這段代碼的作用是設定輸入框的邊框的粗細樣式和顏色,也會增加邊框的寬高。

outline:none;

這段代碼可以使用戶點擊輸入框的時候,輸入框不會被焦點獲取,也就是不會在獲取焦點後被系統改變邊框顏色。

更加美化輸入框的方法