Question

我有一个搜索栏，当点击时会延伸，我希望它看起来与现在完全一样，但可点击区域应该大于可见区域。我不知道如何在CSS中执行此操作，我尝试过的示例是使用padding witchnt为我工作。

以下图片是扩展版。
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;
}

Answer 1

填充是最好的方法，如果填充会扰乱搜索栏周围的其他元素，请尝试定位{{1}}

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

1 个答案: