自定義input標簽輸入框

<input>原始標簽輸入框的樣子：

code：

請輸入用戶名：<input type="text">

對其進行樣式設定，包括輸入框的長寬（width、height）、邊框（border、border-radius）、預設定內容（placeholder）：

code：

請輸入用戶名：<input type="text" placeholder="please enter your name" class="name">

.name{

width: 150px;

height: 30px;

border: 1px solid grey;

border-radius: 15px;

outline: none;  //取消外方框

color: red;  //此處設置的是輸入字體的顏色而不是預定義的提示文本顏色；

}

 

另外如果不設置border屬性的話是這個樣子：

（看起來像是凹進去了一樣）

如果想讓預設內容以及想要輸入的內容與左邊框保持一定距離可以使用text-indent或者padding-left屬性：

code：

text-indent: 1.5em;

（邊框不會隨之增大寬度）

code：

padding-left：22px;

（邊框寬度隨之增大）