本文目錄導(dǎo)讀：

1. 使用CSS的“visibility”屬性

CSS技巧：隱藏表單元素的初始值顯示

在網(wǎng)頁設(shè)計中，有時我們需要隱藏表單元素的初始值，例如輸入框中的默認(rèn)文字，這可以通過CSS來實現(xiàn)，以下是一些方法，幫助我們更好地理解和應(yīng)用這一技巧。

使用CSS的“visibility”屬性

我們可以通過設(shè)置表單元素的visibility屬性為hidden來實現(xiàn)隱藏效果，對于輸入框（input），我們可以這樣操作：

input {
    visibility: hidden; /*隱藏輸入框的初始值*/
}

需要注意的是，雖然元素被隱藏了，但它仍然占據(jù)頁面空間，這意味著元素的位置仍然保留在布局中。

二、使用HTML的“placeholder”屬性結(jié)合CSS的“color”屬性

HTML的placeholder屬性可以在輸入框中設(shè)置默認(rèn)的提示文字，我們可以使用CSS來改變這些提示文字的顏色，使其看起來像是被隱藏了。

<input type="text" placeholder="這里是默認(rèn)文字">

我們可以使用CSS將顏色設(shè)置為透明：

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: transparent; /*透明顯示輸入框中的默認(rèn)文字*/
}
input::-moz-placeholder { /* Firefox 19+ */
  color: transparent; /*透明顯示輸入框中的默認(rèn)文字*/  
} 
input:-ms-input-placeholder { /* IE 10+ */  
  color: transparent; /*透明顯示輸入框中的默認(rèn)文字*/  
}

這樣，用戶看到的就像輸入框中沒有默認(rèn)文字一樣，但實際上，這些文字是存在的，只是被設(shè)置為透明了，當(dāng)用戶開始輸入時，這些文字會消失，這是一種更友好的方式，因為它不會干擾用戶的輸入過程。