可點擊區域搜索欄的更大顯示區域

我有一個搜索欄，點擊時會延長，我希望它看起來和現在一模一樣，但可點擊區域應該比可見區域大。我不知道如何在CSS中做到這一點，我試過的例子是使用填充女巫劑量爲我工作。可點擊區域搜索欄的更大顯示區域

以下圖片是擴展版。
Extended
下一張圖片顯示非擴展搜索欄。我爲當前欄的可點擊寬度添加了一條藍線，併爲我想要的可點擊寬度添加了一條紅線。
Default

這裏是我當前的CSS代碼：

#search { 

} 

#search input[type="text"] { 
    background: url(../images/search-dark.png) no-repeat 10px 50% #f5f5f5; 
    border: 0 none; 

    color: #d7d7d7; 
    width:10px; 
    padding: 6px 16px 6px 25px; 

    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 

    -webkit-transition: all 0.7s ease 0s; 
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s; 
    transition: all 0.7s ease 0s; 


    cursor: pointer; 
} 

#search input[type="text"]:focus { 
    background: url(../images/search-dark.png) no-repeat 10px 50% #EEEEEE; 
    color: #6a6f75; 
    width: 101%; 

    text-align: center; 

    -webkit-border-bottom-left-radius: 20px; 
    -webkit-border-top-left-radius: 20px; 
    -moz-border-radius-bottomleft: 20px; 
    -moz-border-radius-topleft: 20px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-topright: 0px; 

    cursor: text; 

    outline:0px !important; 
}

來源

2015-12-21 Samuel Engström

見[**如何創建一個最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

謝謝你試圖幫助我改進我寫的問題，我看到我有很多代碼我不需要在這裏上傳，但有什麼你看到任何東西g否則需要改進？ –

填充是做到這一點的最好辦法，如果填充圍繞搜索欄鐓等元素，嘗試把它定位absolute

來源

2015-12-21 14:12:12 Pixelomo

可點擊區域搜索欄的更大顯示區域

回答

相關問題