天貓搜索框是一個非常典型的搜索框，具有極佳的用戶體驗。該搜索框采用的是CSS編寫，具有較高的可擴展性和可維護性，同時也具有較高的兼容性。

<div class="search-container">
<input type="text" class="search-input" placeholder="請輸入搜索關鍵詞">
<button class="search-btn">搜索</button>
</div>

上述代碼是天貓搜索框的HTML代碼，在其中包含了一個包裝容器和一個輸入框和一個搜索按鈕。輸入框和搜索按鈕都有它們各自特定的CSS樣式，下面是CSS代碼。

.search-container {
display: flex;
justify-content: center;
align-items: center;
}
.search-input {
width: 300px;
height: 40px;
padding: 5px 10px;
margin-right: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
outline: none;
}
.search-btn {
width: 80px;
height: 40px;
padding: 5px 20px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
background-color: #f40;
cursor: pointer;
}

上述代碼包括了外層容器的樣式和輸入框和搜索按鈕的樣式。其中外層容器采用了彈性盒子布局，使得其可以靈活適應不同的屏幕尺寸。輸入框和搜索按鈕的樣式涉及元素寬高、內外邊距、邊框、圓角、字體大小、陰影等等，這些樣式是可以根據產品需求進行自由定制的。

總的來說，天貓搜索框的CSS實現非常簡潔、易于擴展和維護，并且具有良好的兼容性，可以適應多種瀏覽器和設備。