Woocommerce搜索栏编辑

Question

我有一个搜索小部件。

以下是未点击和点击时的屏幕截图：
没有点击：

点击时：

我应该对Style.css做出哪些更改？
我想在不点击的情况下显示搜索表单，并使搜索栏宽度更宽。

4.1 PT Widget Search (start)*/
.widget_pt_search_widget .search-wrapper{
	position: relative;
	width: 40px;
	height: 40px;
}
.widget_pt_search_widget .show-search {
	cursor: pointer;
	position: relative;
	width: 40px;
	height: 40px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	text-align: center;
	color: #fff;
	border: none;
	z-index: 1002;
	zoom: 1 !important;
	background:#fff;
}
.widget_pt_search_widget .show-search:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: -1;
	box-shadow: inset 0 0 0 20px #00ADEF;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
	-webkit-transition: box-shadow 0.3s, -webkit-transform 0.3;
	transition: box-shadow 0.3s, transform 0.3s;
}
.widget_pt_search_widget .show-search:hover:before {
	box-shadow: inset 0 0 0 1px #00ADEF;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}
.widget_pt_search_widget .show-search .fa.fa-search {
	color: #fff;
	font-size: 20px;
	margin: 9px 0 0 1px;
	-webkit-transition: color 0.3s;
	transition: color 0.3s;
}
.widget_pt_search_widget .show-search:hover .fa.fa-search {
	color: #00adef;
}
.widget_pt_search_widget #pt-searchform-container {
	position: absolute;
	right: 0;
	top: 0;
}
.widget_pt_search_widget #pt-searchform-container.open .search-button {
	position: absolute;
	right: 42px;
	top: 2px;
	height:36px;
	width:auto;
	font-size: 14px !important;
	font-family: inherit;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	color: #fff;
	border: none;
}
.widget_pt_search_widget #pt-searchform-container.close .search-button {
display: none;
}
.widget_pt_search_widget #pt-searchform-container .searchtext {
	height: 40px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border: 1px solid #e1e1e1;
	background:#fff;
	color: inherit;
	z-index: 99;
	width: 100%;
	padding:0 15px;
	-webkit-box-shadow: none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.widget_pt_search_widget #pt-searchform-container.open .searchtext {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(104, 104, 104, 0.30);
	-moz-box-shadow:    0px 0px 5px 0px rgba(104, 104, 104, 0.30);
	box-shadow:         0px 0px 5px 0px rgba(104, 104, 104, 0.30);
	padding-right:40px;
}
	/* Position in header (start)*/
.hgroup-sidebar .widget_pt_search_widget{
	margin-bottom:0;
}
.hgroup-sidebar .widget_pt_search_widget .show-search {
	display: inline-block;
}
@media screen and (max-width: 800px){
	.hgroup-sidebar .widget_pt_search_widget {
		display:none!important;
	}
}
	/* Position in header (start)*/
/* 4.1 PT Widget Search (end)*/