CSS中,.input選擇器用于選中表單元素的輸入框。
.input { border: 1px solid #ccc; padding: 5px; border-radius: 5px; font-size: 16px; color: #333; width: 200px; box-sizing: border-box; }
上述代碼為.input選擇器的一般樣式設(shè)置。
首先,設(shè)置了1像素的薄邊框,顏色為灰色;然后給輸入框添加了5像素的內(nèi)邊距,這樣輸入的文字就不會(huì)太靠近邊框,使得樣式更美觀。同時(shí),設(shè)置了5像素的圓角,使得輸入框看起來(lái)更加柔和。接著,設(shè)置了16像素的字體大小和黑色的字體顏色。為了確保輸入框的大小固定,設(shè)置了200像素的寬度。最后,使用了box-sizing屬性,用于確定元素的盒模型采用哪種方式進(jìn)行計(jì)算。
使用.input選擇器的好處是,可以在CSS中輕松地批量修改表單輸入框的樣式,只需修改一次樣式代碼,即可對(duì)整個(gè)網(wǎng)站的表單元素產(chǎn)生影響。