CSS中的text屬性可以用來設置提示文字。在網頁設計中,提示用戶填寫表單的信息是很常見的任務,我們可以通過在表單輸入框中添加占位符(placeholder)提供提示信息。
在CSS中,我們可以使用text屬性來改變占位符的樣式,比如字體顏色、字號、字形等等。
input[type="text"]::placeholder { color: #999999; font-size: 14px; font-style: italic; }
需要注意的是,不同瀏覽器的支持情況可能不一樣,例如有些瀏覽器不支持改變占位符的字體樣式。因此,我們可以使用逐層降級的方法來處理這種情況:
/*優先使用通用的樣式*/ input::-webkit-input-placeholder { /* WebKit browsers */ color: #999999; font-size: 14px; font-style: italic; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999999; font-size: 14px; font-style: italic; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999999; font-size: 14px; font-style: italic; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999999; font-size: 14px; font-style: italic; } input::placeholder { /*現代瀏覽器*/ color: #999999; font-size: 14px; font-style: italic; }
這樣,我們就可以在不同瀏覽器中提供一致的提示樣式了。