Css 可点击区域搜索栏显示区域较大

我有一个搜索栏，它可以在点击时扩展，我希望它看起来像现在一样，但可点击的区域应该比可见的区域大。我不知道如何在CSS中做到这一点，我尝试过的例子是使用padding witch dosent

下面的图片是扩展版本

下一幅图像显示未扩展的搜索栏。我为当前条的可点击宽度添加了一条蓝线，为我想要的可点击宽度添加了一条红线

以下是我当前的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;
}

---

填充是最好的方法，如果填充打乱了搜索栏周围的其他元素，请尝试定位它

绝对
如果填充打乱了搜索栏周围的其他元素，则填充是最好的方法，尝试定位它
absolute
参见感谢您尝试帮助我改进我的问题写作，我看到我有很多代码不需要上传到这里，但是您是否看到其他需要改进的地方？参见感谢您尝试帮助我改进我的问题写作，我知道我有很多代码不需要上传到这里，但是你还有什么需要改进的吗？