輸入框移動時選擇

Question

我有一個搜索字段在我的網站的頂部，當你選擇它跳起abit出位置，當你點擊框，所以它沒有被選中，但沒有關閉搜索字段是正確對齊。我無法弄清楚當光標在輸入字段時，它會如何移動。

https://www.argentscientific.com

點擊鏈接，然後點擊頂級菜單的右側的搜索圖標，你會看到這個問題。對此感到困惑。

Answer 1

這是因爲沒有包含:focus。當你選擇搜索輸入時，觸發:focus，但現有的css會覆蓋你的css，爲了解決這個問題，你需要在你的css中明確地包含:focus以防止它被覆蓋。嘗試改變下面的CSS從

.aws-container .aws-search-field{ 
    width: 100%; 
    color: #313131; 
    padding: 6px; 
    line-height: 30px; 
    display: block; 
    font-size: 12px; 
    position: relative; 
    z-index: 2; 
    background: rgb(247, 247, 247); 
    -webkit-appearance: none; 
} 

到

.aws-container .aws-search-field, .aws-container .aws-search-field:focus { 
    width: 100%; 
    color: #313131; 
    padding: 6px; 
    line-height: 30px; 
    display: block; 
    font-size: 12px; 
    position: relative; 
    z-index: 2; 
    background: rgb(247, 247, 247); 
    -webkit-appearance: none; 
}