CSS是一種用于網頁設計的語言,通過它我們可以實現各種各樣的樣式和效果,包括文本框的實現。下面介紹一些CSS實現文本框的方法。
/* CSS代碼1:使用border屬性實現文本框 */ input[type=text]{ border: 1px solid #ccc; padding: 5px; } /* CSS代碼2:使用box-shadow屬性實現文本框 */ input[type=text]{ box-shadow: 0 0 5px #ccc; padding: 5px; } /* CSS代碼3:使用background屬性實現文本框 */ input[type=text]{ background: #eee; border: none; padding: 5px; }
以上是三種常見的CSS實現文本框的方法,其中第一種是使用border屬性設置邊框樣式和寬度,第二種是使用box-shadow屬性實現底部陰影效果,第三種是直接使用background屬性設置背景色。
另外,如果要實現不同狀態下的文本框效果,可以使用偽類選擇器,如下所示:
/* CSS代碼4:使用偽類選擇器實現鼠標懸浮時的效果 */ input[type=text]:hover{ border: 1px solid #aaa; } /* CSS代碼5:使用偽類選擇器實現獲得焦點時的效果 */ input[type=text]:focus{ border: 1px solid #00f; box-shadow: 0 0 5px #00f; outline: none; }
其中,第四種是使用:hover偽類選擇器實現鼠標懸浮時的效果,第五種是使用:focus偽類選擇器實現獲得焦點時的效果,并且使用outline:none屬性去掉默認的藍色邊框。
總之,CSS提供了豐富的樣式和效果,只需要根據需求選擇合適的屬性和值即可實現各種文本框效果。
上一篇css實現機械打字效果