可点击区域搜索栏的更大显示区域

我有一个搜索栏，点击时会延长，我希望它看起来和现在一模一样，但可点击区域应该比可见区域大。我不知道如何在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

可点击区域搜索栏的更大显示区域

回答

相关问题