在CSS2中,搜索框樣式是可以使用CSS來(lái)控制的。下面是一些常用的搜索框樣式代碼:
/*搜索框外框樣式*/ .search-box { width: 300px; height: 30px; border: 2px solid #ccc; border-radius: 5px; box-sizing: border-box; } /*搜索框輸入框樣式*/ .search-box input[type="text"] { width: 100%; height: 100%; border: none; outline: none; padding: 5px; font-size: 14px; } /*搜索框按鈕樣式*/ .search-box button { width: 80px; height: 100%; background-color: #008CBA; color: #fff; border: none; border-radius: 0 5px 5px 0; cursor: pointer; font-size: 14px; } /*搜索框鼠標(biāo)懸停樣式*/ .search-box:hover input[type="text"] { background-color: #eee; } .search-box:hover button { background-color: #005E80; }
需要注意的是,這只是一些基礎(chǔ)的樣式,如果需要更復(fù)雜的樣式,需要根據(jù)實(shí)際情況進(jìn)行調(diào)整。同時(shí),在使用這些樣式時(shí),還需要注意瀏覽器兼容性的問(wèn)題。